CSS
CSS3
animation
transition

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(ミリ秒) 変化に掛かる時間を指定する

1513660313.gif

サンプルコード

transition-delay

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

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

1513662114.gif

サンプルコード

transition-property

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

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

上がnone下がall

1513661721.gif

サンプルコード

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)

1513662478.gif

サンプルコード

Animationの利用

animation-name

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

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

animation-duration

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

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

1513694584.gif

サンプルコード

animation-delay

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

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

1513694679.gif

サンプルコード

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)

1513694765.gif

サンプルコード

animation-iteration-count

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

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

上から1回 2回 infinite

1513694867.gif

サンプルコード

animation-direction

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

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

上からnormal reverse alternate alternate-reverse

1513695071.gif

サンプルコード

animation-fill-mode

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

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

上からnone forwards backwards both

1513695206.gif

サンプルコード

animation-play-state

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

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

上がrunning 下がpaused

1513695321.gif

サンプルコード

最後に

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


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