CSSアニメーション作成で使うanimationプロパティ

animationプロパティはCSSアニメーション作成で設定するプロパティの値をまとめて要素に適用する時に使います。

animationプロパティについて
keyframesについて

animationプロパティについて

animationプロパティは複数あるアニメーションの動きの指定をまとめて書くことができます。
animation: 値値 ;という書き方になります。

.test-animation {
  background: 00ebff;
    animation: test 3s linear 1s infinite running;
}

上記の指定を1つずつバラバラにすると、↓このようになります。

.test-animation {
  background: 00ebff;
    animation-name: test;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

→　test /*アニメーション名 animation-name: test;*/
→　3s /*周期の所要時間　animation-duration: 3s;*/
→　linear /*周期進行指定　animation-timing-function: linear;*/
→　1s /*開始タイミング指定 animation-delay: 1s;*/
→　infinite /*繰り返し　animation-iteration-count: infinite;*/
→　running /*アニメーション再生中　animation-play-state: running;*/

実装するとこのような動きを付けられます↓

　STOP

参考記事animation – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/animation
CSS アニメーションを一時停止する – Qiita
https://qiita.com/junya/items/8de71adeab0312d94dff
https://jsfiddle.net/junya_5102/ttc43Lry/

keyframesについて

@keyframes（@-規則）はアニメーションキーフレームのスタイル定義を開始～終了までどのようにするのか指定する方法で開始時が0%（またはfrom）で終了時が100%（またはto）、30%や50%は中間地点です。

@keyframes test {
  0% {  top: 0; }
  50% { top: 30px; left: 20px; }
  100% { top: 0; }
}

@keyframes animation-nameで付けた名前 {
0% { プロパティ: 値; }
50% { プロパティ: 値; }
100% { プロパティ: 値; }
}

アニメーションとキーフレームを一致させるためanimation-nameプロパティにて使った名前と同じ文字列を付けます。