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-duration かかる時間
・animation-timing-function どのようなアニメーションするか
・animation-delay 何秒後に開始するか
・animation-iteration-count 繰り返す回数
・animation-direction 反転再生
・animation-fill-mode アニメーション実行前・実行後の状態
・animation-play-state アニメーションを一時停止・再生させる
・@keyframes 変化の指定
各詳細
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:一時停止