すかっの動き

すかっの動きは、2つに分かれます。

suka2種類公式

意味ごとの動き

胸がすく爽快さ

空振りする

胸がすく爽快さ

達成の爽快感

160%まで一気に広がって、はじけるように消える。

時間: 0.36s
くり返し: しない
速さの変化: ease-out
動かすもの: 大きさ・透明度 scale opacity

CSS を見る

@keyframes onoma-suka {
  0% { transform: scale(1, 1); opacity: 1; }
  35% { transform: scale(1.3, 1.3); opacity: 1; }
  100% { transform: scale(1.6, 1.6); opacity: 0; }
}

.onoma-suka {
  animation: onoma-suka 0.36s ease-out both;
}

/* 動きを減らす設定の人には、消えるだけ */
@keyframes onoma-suka-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .onoma-suka { animation: onoma-suka-fade 0.2s ease-out both; }
}

自分の素材で試すコードを使う

空振りする

当たらなかった

下の端を軸に18°傾き、少し止まってから起き上がる。

時間: 0.5s
くり返し: しない
速さの変化: ease-in-out
動かすもの: 回転 rotate

CSS を見る

@keyframes onoma-suka-2 {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(18deg); }
  65% { transform: rotate(18deg); }
  100% { transform: rotate(0deg); }
}

.onoma-suka-2 {
  animation: onoma-suka-2 0.5s ease-in-out both;
  transform-origin: 50% 100%;
}

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  .onoma-suka-2 { animation: none; }
}

自分の素材で試すコードを使う

近い動きと見比べる

すかっ胸がすく爽快さ

あはは明るく笑う

ぷりぷり弾力に富む