OnomaUI

ぶすっ の動き

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

busu2種類公式

意味ごとの動き

深く突き刺す
むすっと黙り込む

深く突き刺す

ピンを刺す

上80%から加速して落ち、着地で6%つぶれて止まる。

時間
0.3s
くり返し
しない
速さの変化
cubic-bezier(.55,0,1,.45)
動かすもの
位置・大きさ translate scale
CSS を見る
@keyframes onoma-busu {
  0% { transform: translate(0%, -80%) scale(1, 1); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  62% { transform: translate(0%, 0%) scale(1.06, 0.94); animation-timing-function: ease-out; }
  80% { transform: translate(0%, 0%) scale(0.99, 1.01); }
  100% { transform: translate(0%, 0%) scale(1, 1); }
}

.onoma-busu {
  animation: onoma-busu 0.3s cubic-bezier(.55,0,1,.45) both;
}

/* 動きを減らす設定の人には、現れるだけ */
@keyframes onoma-busu-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .onoma-busu { animation: onoma-busu-fade 0.2s ease-out both; }
}
自分の素材で試すコードを使う

むすっと黙り込む

不機嫌の表現

12%下へずしんと沈み込み、しばらくしてから戻る。

時間
1.6s
くり返し
しない
速さの変化
ease-in-out
動かすもの
位置・大きさ translate scale
CSS を見る
@keyframes onoma-busu-2 {
  0% { transform: translate(0%, 0%) scale(1, 1); animation-timing-function: ease-out; }
  35% { transform: translate(0%, 12%) scale(1.04, 0.9); }
  75% { transform: translate(0%, 12%) scale(1.04, 0.9); }
  100% { transform: translate(0%, 0%) scale(1, 1); }
}

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

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

近い動きと見比べる

ぶすっ深く突き刺す
どすっ鈍く重く突く
ばしっ強く打つ・決める

同じ動きを表す言葉

ぶすり