ぶーぶーの動き

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

buubuu2種類公式

意味ごとの動き

小刻みに振動する

不満を並べる

小刻みに振動する

着信・通知

左右に3%、細かく速く振動し続ける。

時間: 0.12s
くり返し: する
速さの変化: linear
動かすもの: 位置・回転 translate rotate

CSS を見る

@keyframes onoma-buubuu {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  25% { transform: translate(3%, 0%) rotate(0deg); }
  50% { transform: translate(0%, 0%) rotate(0deg); }
  75% { transform: translate(-3%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-buubuu {
  animation: onoma-buubuu 0.12s linear infinite both;
}

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

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

不満を並べる

不満の表現

左右に3往復、最大14°ずつ首を振るように揺れて止まる。

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

CSS を見る

@keyframes onoma-buubuu-2 {
  0% { transform: rotate(0deg); }
  14.29% { transform: rotate(14deg); }
  28.57% { transform: rotate(-11.67deg); }
  42.86% { transform: rotate(9.33deg); }
  57.14% { transform: rotate(-7deg); }
  71.43% { transform: rotate(4.67deg); }
  85.71% { transform: rotate(-2.33deg); }
  100% { transform: rotate(0deg); }
}

.onoma-buubuu-2 {
  animation: onoma-buubuu-2 0.8s ease-in-out both;
}

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

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

近い動きと見比べる

ぶーぶー小刻みに振動する

ぺたっ平らに貼り付く

どどど地響きが続く