CSSアニメーションの省略形を使用してアニメーションを簡単に実行します。

animation: crazy 4s ease-in-out 0.5s 12 backwards;
  • クレイジー:アニメーション名
  • 4s :期間
  • イーズインアウト:タイミング機能
  • 0.5s :遅延
  • 12 :反復回数
  • 後方:塗りつぶしモード

タイミング機能

アニメーションタイミング関数は、線形、イーズイン、イーズイン、イーズアウト、イーズインアウト、またはキュービックベジェ(…)のいずれかの値を取ることができます。

フィルモード

Animation-fill-modeは、none、forwards、backwarts、またはその両方の値のいずれかを取ることができます。