CSSアニメーションで再生方法の変更や一括指定プロパティを理解しよう

animationの再生順

アニメーションの再生順や方向を指定できます。

animation-direction: alternate;　を使用すると、再生後に折り返して逆再生します。

animation-direction: reverse;　を使用すると、逆から再生します。

animation-direction: alternate-reverse;　を使用すると、逆から再生されて、折り返して逆再生されます。

animation-timing-function: linear;　を使用すると、等速スピードになります。

animationの一括指定プロパティ

animation: ;　を使うことで、-nameや　-duration、-iteration-count、-delayを一括で指定できます。

animation: test 2s infinite 1s;　で、1秒後に、testのアニメーションが2秒の間、ずっと繰り返します。

ボタン作成

アニメーションを利用したボタンを作成します。

ボタンに対して、backgroundを指定します。

:hoverを使って、カーソルを置くと色が明るくなるようにbackgroundを指定します。

ボタンに対して、transition: background .3s;　で、0.3秒で色が変わるアニメーションができました。