OnomaUI

ごーん の動き

「鐘が重く鳴る」を表す動きです。

goon1種類公式

見本

鐘が重く鳴る

時刻・節目の合図

上の端を軸に、最初は12°揺れて、だんだん止まる。

時間
2.2s
くり返し
しない
速さの変化
ease-in-out
動かすもの
回転 rotate
CSS を見る
@keyframes onoma-goon {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(12deg); }
  40% { transform: rotate(-7.2deg); }
  60% { transform: rotate(4.2deg); }
  80% { transform: rotate(-1.8deg); }
  100% { transform: rotate(0deg); }
}

.onoma-goon {
  animation: onoma-goon 2.2s ease-in-out both;
  transform-origin: 50% 0%;
}

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

近い動きと見比べる