ひょこひょこの動き（CSS アニメーション）

上下に揺れて歩く

キャラクターの移動

5歩、12%ずつ跳ねながら90%進むのをくり返す。

時間: 1.6s
くり返し: する
速さの変化: linear
動かすもの: 位置・透明度 translate opacity

CSS を見る

@keyframes onoma-hyokohyoko {
  0% { transform: translate(-45%, 0%); opacity: 0; animation-timing-function: ease-out; }
  10% { transform: translate(-36%, -12%); opacity: 1; animation-timing-function: ease-in; }
  20% { transform: translate(-27%, 0%); opacity: 1; animation-timing-function: ease-out; }
  30% { transform: translate(-18%, -12%); opacity: 1; animation-timing-function: ease-in; }
  40% { transform: translate(-9%, 0%); opacity: 1; animation-timing-function: ease-out; }
  50% { transform: translate(0%, -12%); opacity: 1; animation-timing-function: ease-in; }
  60% { transform: translate(9%, 0%); opacity: 1; animation-timing-function: ease-out; }
  70% { transform: translate(18%, -12%); opacity: 1; animation-timing-function: ease-in; }
  80% { transform: translate(27%, 0%); opacity: 1; animation-timing-function: ease-out; }
  90% { transform: translate(36%, -12%); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translate(45%, 0%); opacity: 0; }
}

.onoma-hyokohyoko {
  animation: onoma-hyokohyoko 1.6s linear infinite both;
}

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

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

ひょこひょこの動き

見本

上下に揺れて歩く

近い動きと見比べる