【animation】いまいちわかりにくいCSS-animationのプロパティをまとめてみたで！

CSS3のanimationをいろいろ試してみたが、どうにもわかりにくい。
プロパティが多い上に、意味がわからん。
そこで今回は各プロパティの中身と違いがわかるうように並べてまとめてみた。

animation-name

「animation-name」はその名の通り、「アニメーションの名前」だ。
「@keyframes」に「animation-name」とCSSスタイルを設定し、
アニメーションを適用させるクラスに指定する。
ちなみに初期値は「none」

「@keyframes」は以下のアニメーションにおいて下記すべて共通。

青い帯が若干の色調を変えながら横幅0%から100%まで伸びていくという単純なアニメーション。
目で見てわかりやすいように繰り返し再生を設定します。

基本アニメーション

animation-duration

「animation-duration」はアニメーション1回が実行される時間の長さ。
単位は「s」で1秒なら「1s」、5秒なら「5s」。
ちなみに初期値は0なので設定しないとアニメーションは実行されない。

animation-durationを5秒に設定

基本アニメーションに「linear」を加えています。

animation-durationを10秒に設定

上の5秒設定と比較するとわかりやすい。

animation-timing-function

「animation-timing-function」はアニメーションのタイミングと進行割合。
この値を変更することで滑らかな動きを設定できる。
初期値は「ease」
以下は値による違い。

「ease」開始と完了を滑らか

「linear」一定速度

「ease-in」ゆっくり始まる

「ease-out」ゆっくり終わる

「ease-in-out」ゆっくり始まってゆっくり終わる

animation-delay

「animation-delay」はアニメーションのスタートするタイミング。
単位は「s」で同じく秒数で設定。
初期値は「0」でアニメーションは即開始される。
正の値を設定するとその時間分遅れてスタートし、
負の値を設定するとその時間分遡った途中から開始される。

開始を2秒後に設定

通常

開始を2秒前開始の途中に設定

並べてみると時間差になっているのがわかる。

animation-iteration-count

「animation-iteration-count」はアニメーションの繰り返す回数。
初期値は「1」で負の値は適用されない。
「infinite」を設定することで、無限にループされる。

再生回数を3回に設定

再生されない場合はリロードしてください。

animation-direction

「animation-direction」はアニメーションの交互反転再生の有無を設定。
初期値は「normal」で同じ再生を繰り返し、
「alternate」を設定すると、偶数回は反転で再生される。

通常の繰り返し再生

交互に反転で再生

まとめ

以上、今回はCSSアニメーションのプロパティをまとめてみた。
青い帯がチカチカして目が痛いぜ。
なんでもっと目に優しい色にしなかったのか。

 - CSS野郎