😘

【CSSアニメーション】animationと@keyframesについて

に公開

はじめに

今回はCSSでアニメーションを実装する時によく使うanimationプロパティと@keyframesについて備忘録として残そうと思います。駆け出しの方であったり、感覚でコードを書いている方々は必ず全員このanimationプロパティと@keyframesで躓くと思います。(ソースはワイ)

animationプロパティと@keyframesを簡単にでも抑えておくことで実装できるアニメーションの幅が広がり、ワンランク上のwebアプリケーションを開発できます。

animationプロパティについて

animationプロパティとはその名の通り、アニメーションを作成するCSSプロパティとなっております。種類が多いので以下で簡単にまとめました。

animationプロパティ一覧

プロパティ 概要 初期値
①animation-name アニメーション名(@keyframes名) none
②animation-duration アニメーションが開始してから終了するまでの時間 0
③animation-timing-function アニメーションの速度 ease
④animation-delay アニメーションが開始するまでの時間 0
⑤animation-iteration-count アニメーションを繰り返す回数 1
⑥animation-direction アニメーションの再生方向(順番) normal
⑦animation-fill-mode アニメーション開始時と終了時のスタイルの状態 none
⑧animation-play-state アニメーションの再生・停止 running

※簡単にまとめただけなので詳しい値の記述方法については以下のドキュメントを見てみて下さい。
https://developer.mozilla.org/ja/docs/Web/CSS/animation

尚、上記一覧のプロパティを一括で指定するプロパティもあります。一括で指定する場合は一覧の上から順番に記述します。

animation一括指定
.sample {
	animation:①-name ②-duration ③-timing ④-delay ⑤-iteration ⑥-direction ⑦-fill ⑧-play;
}

@keyframesについて

@keyframesはアニメーション開始から終了までどのような動きをするのかを指定できるものです。animationプロパティと一緒に使うと、より複雑にアニメーションを展開することができます。

基本の書き方は以下になります。

@keyframes
@keyframes アニメーション名(なくても良い) {
	0% {
		CSSプロパティ:;
	}
	100% {
		CSSプロパティ:;
	}
}

0%はアニメーションの開始、100%はアニメーションの終わりを表しています。(0%to100%fromに置き換え可能)

transitionとの違いについて

animationの他にもtransitionでもアニメーションを実装できます。
双方の違いに関しては、以下の表でまとめました。

- animation transition
ループ ×
再生回数設定 一回のみ再生
遅延設定
緩急設定
再生時のトリガー 自動再生可能 hoverやactiveの疑似要素
アニメーションの方向 ×

おさえておくポイントとしては、transitionはアニメーションの始まりと終わりのみ指定できるのに対し、animationはアニメーションの動きを細かく指定可能となります。他にも、transitionはマウスホバーや、クリック等のトリガーが必要なのに対し、animationはトリガーが不要となります。

これだけ見ると、一見animationしか勝たんくね?と思うかもしれませんが、実際の話、一長一短で適材適所になります。

自動再生やループするような細かい設定が必要なアニメーションはanimation、それ以外はtransitionと覚えておけば良いでしょう。

transitionに関しては今回は説明しませんのでわからない方、気になった方は以下のドキュメントを見てみて下さい。(気分によっては記事書くかもしれないです)
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

animationと@keyframesでの実装方法

簡単な例としてローディングアニメーションを作ってみました。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/animation
https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://pengi-n.co.jp/blog/css-animation/

Discussion