CSSでanimation記述をする時に、設定の書き方を毎回、悩んで、探して、ググって、あーだこーだやっているので、自分備忘録用テンプレートをパターン別に書き残しておきます。
下記のパターンは同じ処理を書いているので、どちらで記述してもOKという事。
1行パターン
1秒後に2秒間のアニメーションを1回実行
animation : anim-name 2.0s ease-out 1.0s forwards;
1秒後に2秒間のアニメーションを無限ループで実行
animation : anim-name 2.0s ease-out 1.0s infinite;
設定個別に記載パターン
1秒後に2秒間のアニメーションを1回実行
animation-name : anim-name;
animation-duration:2.0s;
animation-timing-function: ease-out;
animation-delay:1.0s;
animation-iteration-count: forwards;
1秒後に2秒間のアニメーションを無限ループで実行
animation-name : anim-name;
animation-duration:2.0s;
animation-timing-function: ease-out;
animation-delay:1.0s;
animation-iteration-count: infinite;
参考サイト
mdn web docs