アニメーション中間ステップの制御 - CSS Animation

@keyframes を使う

構文

開始と終了の状態を指定する

@keyframes <custom-ident> {
  from {},
  to {}
}

中間地点の状態を%で指定する

@keyframes <custom-ident> {
  0% {},
  50% {},
  100% {},
}

<custom-ident>は、キーフレームリスト(@keyframes)の識別名。 重複していれば、最後に定義されたキーフレームリストが適用される。

キーフレームが重複している場合は、キーフレームで指定されたすべての値が適用される。同じプロパティがある場合は、後で定義されたものが優先される。 例えば以下のキーフレームでは、 - top: 10px; - left:20 が適用される。

  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }