CSSアニメーション まとめ

はじめに

最近CSSアニメーションを勉強し始めました。
「JavaScript使ってないのに動く、すげー！」っと思ったのでまとめました。

CSSアニメーションとは

TransitionとAnimationという機能を使用し、アニメーションを実装することです。

Transitionとは

直訳すると「遷移（移り変わり）」という意味です。
一定時間でプロパティを変化させる機能です。
主に、単純な動きのアニメーションを実装する際に利用します。

Animationとは

キーフレームアニメーションを適用できる機能です。
主に、細かい動きのアニメーションを実装する際に利用します。

キーフレームアニメーションとは

アニメーションの開始から終了までの経過地点にプロパティを指定できるアニメーションのことです。

CSSアニメーションを使うメリットとデメリット

メリット

• 処理が速い
• 動きが滑らか
• JavaScriptを使わなくても動く

デメリット

• コード量が多くなる
• レガシーブラウザでは動かない

CSSアニメーションの利用

AnimationとTransitionを利用するためには以下のプロパティを指定します。

Transition

プロパティ名	説明
transition-duration	変化が始まって終わるまでの時間を指定する
transition-delay	変化が始まる時間を指定する
transition-property	変化が適用されるCSSのプロパティを指定する
transition-timing-function	変化の度合いを指定する
transition	ショートハンド・プロパティ

Animation

プロパティ名	説明
animation-name	アニメーションの名前
animation-duration	アニメーションが始まって終わるまでの時間を指定する
animation-timing-function	アニメーションの進行の度合いを指定する
animation-delay	アニメーションが始まる時間を指定する
animation-iteration-count	アニメーションの繰り返し回数を指定する
animation-direction	アニメーションの再生方向を指定する
animation-fill-mode	アニメーションの開始前、終了後のスタイルを指定する
animation-play-state	アニメーションの再生・停止を指定する
animation	ショートハンド・プロパティ

アニメーションの実装

グダグダ書いていても面白くないので実装していきます。

Transitionの利用

アニメーションは全て「:hover擬似クラス」を使用して説明します。ご了承ください。

transition-duration

変化が始まって終わるまでの時間を指定します。指定しない場合は初期値の0sが適応されます。

値	単位	説明
時間	s(秒),ms(ミリ秒)	変化に掛かる時間を指定する

サンプルコード

transition-delay

変化が始まる時間を指定します。指定しない場合は初期値の0sが適応されます。

値	単位	説明
時間	s(秒),ms(ミリ秒)	変化が始まる時間を指定する

サンプルコード

transition-property

変化が適用されるCSSのプロパティを指定します。複数のCSSプロパティに変化を適用する場合には、変化させるプロパティのリストをカンマ区切りで指定します。指定しない場合は初期値のallが適応されます。

値	説明
all(初期値)	変化を適用できるプロパティすべてが変化する
none	どのプロパティも変化しない
プロパティ名	変化させるプロパティ名を指定する

上がnone下がall

サンプルコード

transition-timing-function

変化の度合いを指定します。指定しない場合は初期値のeaseが適応されます。

値	説明
ease(初期値)	開始時と終了時が緩やかに変化する
linear	開始から終了まで一定に変化する
ease-in	開始時は緩やかに変化し、終了時に近づくと早く変化する
ease-out	開始時は早く変化し、終了時は緩やかに変化する
ease-in-out	開始時と終了時は、かなり緩やかに変化する
step-start	変化の開始時点で終了状態に変化する
step-end	開始時に変化せず、終了時に変化が完了した状態になる
steps(正数, start または end)	指定した正数の段階で変化する。 start を指定すると、アニメーション開始時から変化し、 end を指定すると、アニメーション終了時に変化する。
cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)	変化の度合いを3次ベジェ曲線で指定する

cubic-bezierは割愛。

上からease linear ease-in ease-out ease-in-out step-start step-end steps(5, start) steps(5, end)

サンプルコード

Animationの利用

animation-name

要素に適用するキーフレームアニメーションを指定します。
キーフレームアニメーションは@keyframes 任意の名前で定義します。

animation-nameプロパティだけでは、どのアニメーションを適用するかを設定しただけなのでまだ動きません。

animation-duration

アニメーション開始から終了までの時間を指定します。指定しない場合は初期値の0sが適応されます。

値	単位	説明
時間	s(秒),ms(ミリ秒)	アニメーション開始から終了までの時間を指定する

サンプルコード

animation-delay

アニメーションが始まる時間を指定します。指定しない場合は初期値の0sが適応されます。

値	単位	説明
時間	s(秒),ms(ミリ秒)	変化が始まる時間を指定する

サンプルコード

animation-timing-function

アニメーションの変化の度合いを指定します。指定しない場合は初期値のeaseが適応されます。

値	説明
ease(初期値)	開始時と終了時が緩やかに変化する
linear	開始から終了まで一定に変化する
ease-in	開始時は緩やかに変化し、終了時に近づくと早く変化する
ease-out	開始時は早く変化し、終了時は緩やかに変化する
ease-in-out	開始時と終了時は、かなり緩やかに変化する
step-start	変化の開始時点で終了状態に変化する
step-end	開始時に変化せず、終了時に変化が完了した状態になる
steps(正数, start または end)	指定した正数の段階で変化する。 start を指定すると、アニメーション開始時から変化し、 end を指定すると、アニメーション終了時に変化する。
cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)	変化の度合いを3次ベジェ曲線で指定する

cubic-bezierは割愛。

上からease linear ease-in ease-out ease-in-out step-start step-end steps(5, start) steps(5, end)

サンプルコード

animation-iteration-count

アニメーションのループ回数を指定します。指定しない場合はアニメーションが1回実行されます。

値	説明
回数	指定した回数だけアニメーションを実行する
infinite	アニメーションを無限に繰り返す

上から1回 2回 infinite

サンプルコード

animation-direction

アニメーションの再生方向を指定します。指定しない場合は初期値のnormalが適応されます。

値	説明
normal	毎回、順方向のアニメーションが再生される
reverse	毎回、逆方向からのアニメーションが再生される
alternate	順方向、逆方向のアニメーションを交互に繰り返す
alternate-reverse	逆方向、順方向のアニメーションを交互に繰り返す

上からnormal reverse alternate alternate-reverse

サンプルコード

animation-fill-mode

アニメーションの開始前、終了後のスタイルを指定します。指定しない場合は初期値のnoneが適応されます。

値	説明
none	アニメーションで指定したスタイルは、アニメーションの開始前、終了後には適用されない
forwards	アニメーション終了時のスタイルがアニメーション終了後にも適用される
backwards	アニメーション開始時のスタイルがアニメーション開始前にも適用される
both	forward と backwards の両方が適用される

上からnone forwards backwards both

サンプルコード

animation-play-state

アニメーションの再生・停止を指定します。指定しない場合は初期値のrunningが適応されます。

値	説明
running	アニメーションが実行される
paused	アニメーションが停止される

上がrunning　下がpaused

サンプルコード

最後に

CSSアニメーションは楽しいです。是非皆さんもCSSアニメーションで遊んでみてください。

---

参考サイト
CSSアニメーション 入門
【CSS3】Transition（変化）関連のまとめ
【CSS3】@keyframes と animation 関連のまとめ