OnomaUI

しゃん の動き

しゃん の動きは、2つに分かれます。

shan2種類公式

意味ごとの動き

鈴が一度鳴る
姿勢を正す

鈴が一度鳴る

鳴った合図

一瞬110%に広がって光り、元に戻る。

時間
0.4s
くり返し
しない
速さの変化
ease-out
動かすもの
大きさ・透明度 scale opacity
CSS を見る
@keyframes onoma-shan {
  0% { transform: scale(1, 1); opacity: 1; }
  20% { transform: scale(1.1, 1.1); opacity: 0.35; }
  50% { transform: scale(1, 1); opacity: 1; }
  100% { transform: scale(1, 1); opacity: 1; }
}

.onoma-shan {
  animation: onoma-shan 0.4s ease-out both;
}

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  .onoma-shan { animation: none; }
}
自分の素材で試すコードを使う

姿勢を正す

準備ができた状態

下の端から上へ15%伸び、弾むように元へ戻る。

時間
0.5s
くり返し
しない
速さの変化
ease-in-out
動かすもの
大きさ scale
CSS を見る
@keyframes onoma-shan-2 {
  0% { transform: scale(1, 1); }
  40% { transform: scale(0.95, 1.15); }
  70% { transform: scale(1.01, 0.97); }
  88% { transform: scale(1, 1.01); }
  100% { transform: scale(1, 1); }
}

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

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  .onoma-shan-2 { animation: none; }
}
自分の素材で試すコードを使う

近い動きと見比べる

しゃん鈴が一度鳴る
すぽん勢いよく抜ける
ちんチンと鳴って完了