css animationについて、あまり使う機会はありませんよね？
あったとしても、ローディングなどごく一部でしか使わないので、下記の参考サイトなどからコピーや微調整して使うことは多いのではないでしょうか？
今回は、css animation の基本的なところを改めて確認しようと思います。
まずはシンプルに円を作成します。
<div class="circle"></div>.circle {
width: 30px;
height: 30px;
border-radius: 30px;
background: #2196F3;
}その円をゆっくり移動しましょう。
まずはキーフレームの作成から始めます。
@keyframes example {
0% {
transform:translateX(0);
}
100% {
transform:translateX(200);
}
}キーフレームを作成しただけではまだ動きません。
次ように円が表示されたと思います。
最後に.circleにanimationのプロパティを追加します。
.circle {
animation-name: example;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
animation-play-state: running;
}次のように円がアニメーションしたと思います。
各animationプロパティについて
animation-name
要素にキーフレームアニメーションを適用するアニメーション名を指定します。
（今回は「example」です。）
animation-duration
アニメーション一回分の時間の長さを指定します。
animation-duration: 1s;
animation-duration: 3s;
animation-timing-function
アニメーションの動きの加減速(イージング)を設定します。
キーワード「ease-out」やcubic-bezierなどで指定します。
animation-timing-function: ease-out;
animation-timing-function: steps(3, end);
animation-timing-function: cubic-bezier(0.86, 0, .07, 1);
easingsについては下記が参考になると思います。
https://easings.net/ja
animation-delay
アニメーションの開始を遅らせる時間を指定します。
animation-delay:0;
Start
animation-delay:1s;(1秒後開始されます)
Start
animation-iteration-count
停止するまでにアニメーション周期が再生される回数を指定します
animation-count:infinite; (無制限に繰り返されます)
Start
animation-iteration-count:3; (3回繰り返されます)
Start
animation-direction
アニメーション再生の方向をしていします。
animation-direction:normal;(周期ごとに初回に戻ります)
Start
animation-direction:reverse;(逆方向に開始され、周期ごとに初回に戻ります)
Start
animation-direction:alternate;(毎回反転させます。初回は順方向になります。)
Start
animation-direction:alternate-reverse;(毎回反転させます。初回は逆方向になります。)
Start
animation-fill-mode
実行の前後にどう対象にスタイルを適用するかを設定します。
none
適用されているcssの初期値
forwards
最後の適切なキーフレームで定義された値を対象に適用されると同時に適用
backwards
最初の適切なキーフレームで定義された値を対象に適用されると同時に適用
both
forwardsとbackwardsの両方適用animation-play-state
アニメーションが実行中か停止中かを設定します。
running
アニメーションが現在実行中になります
paused
アニメーションが現在停止します。
以上がCSS animationの基本的な使い方です！
このように分けて考えるとわかりやすのではないでしょうか？
次回はさらに詳しい内容をお伝えできればと思います。