かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

CSS Animation アニメーション完了後にアニメーションの最後の状態のままで止めたい

CSS

CSS animation でアニメーション完了後にアニメーションの最後の状態で止まってほしい時のメモ

animation-fill-mode プロパティを forwards にする。

.box {
  animation: my-anime 5s ease
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

animationプロパティの値に続けて書いてもOKっぽい

.box {
  -webkit-animation: box-anime 5s ease forwards;
  animation: box-anime 5s ease forwards;
}

サンプル

See the Pen CSS ANIMATION TEST by KiKiKi (@chaika-design) on CodePen.

　

Stylusでコンパイルしたら、-webkitとか-mozとかのベンダープレフィックスいっぱい出力されてたけど、まだ必要なのだろうか？ animation-fill-modeを使うなら必要？？？

[参考]

アニメーションの本―動く絵を描く基礎知識と作画の実際

アニメーションの本―動く絵を描く基礎知識と作画の実際