cssのメモとして残しますー！

テンプレート

animation: name 0.6s ease-in-out infinite alternate;
-webkit-animation: name 0.6s ease-in-out infinite alternate;
-moz-animation: name 0.6s ease-in-out infinite alternate;

@keyframes name{
      0%{
      }
      100%{
      }
}
@-webkit-keyframes name{
      0%{
      }
      100%{
      }
}
@-moz-keyframes name{
      0%{
      }
      100%{
      }
}

単語説明

各詳細

animation-name　適用するキーフレームの名前

animation-duration　かかる時間

0s：初期値
1sなど
100msなど

animation-timing-function　どのようなアニメーションするか

ease：初期値
ease-in：入りがなめらか
ease-out：最後がなめらか
ease-in-out
linear

animation-delay　何秒後に開始するか

0：初期値
1sなど
100msなど

animation-iteration-count　繰り返す回数

1：初期値
1.5：小数点も可
infinite：無限

animation-direction　反転再生

normal：初期値・アニメーションが終わると初期位置に戻る
alternate：逆方向も実行する
reverse：毎回逆方向を実行する
alternate-reverse：逆方向から実行して繰り返す

animation-fill-mode　実行前・実行後の状態

none：初期値
forwards：最後の状態をキープ
backwards
both

animation-play-state　一時停止・再生させる

running：初期値、再生
paused：一時停止