OnomaUI

ちょろちょろ の動き

ちょろちょろ の動きは、2つに分かれます。

chorochoro2種類公式

意味ごとの動き

細く流れ続ける
すばしこく動き回る

細く流れ続ける

少しずつ読み込む

上から50%落ちて、着くとつぶれて消えるのをくり返す。

時間
0.6s
くり返し
する
速さの変化
ease-in
動かすもの
位置・大きさ・透明度 translate scale opacity
CSS を見る
@keyframes onoma-chorochoro {
  0% { transform: translate(0%, -50%) scale(0.9, 1.1); opacity: 0; }
  12% { transform: translate(0%, -41.43%) scale(0.9, 1.1); opacity: 1; }
  70% { transform: translate(0%, 0%) scale(0.9, 1.1); opacity: 1; animation-timing-function: ease-out; }
  80% { transform: translate(0%, 0%) scale(1.3, 0.6); opacity: 1; }
  92% { transform: translate(0%, 0%) scale(1.4, 0.3); opacity: 0; }
  100% { transform: translate(0%, 0%) scale(1.4, 0.3); opacity: 0; }
}

.onoma-chorochoro {
  animation: onoma-chorochoro 0.6s ease-in infinite both;
  transform-origin: 50% 100%;
}

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

すばしこく動き回る

小さな動物の動き

左右25%ずつ、なめらかに行き来し続ける。

時間
0.5s
くり返し
する
速さの変化
ease-in-out
動かすもの
位置 translate
CSS を見る
@keyframes onoma-chorochoro-2 {
  0% { transform: translate(-25%, 0%); }
  100% { transform: translate(25%, 0%); }
}

.onoma-chorochoro-2 {
  animation: onoma-chorochoro-2 0.5s ease-in-out infinite alternate both;
}

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

近い動きと見比べる

ちょろちょろ細く流れ続ける
がしがし乱暴にかきむしる
ちょきちょきはさみで切り進む