名古屋市のフロントエンドエンジニアがWEB制作に関する技術メモを書いています

メニュー

ホーム > HTML > CSS3でアニメーション!transitionとanimationまとめ(サンプル付き)

CSS3でアニメーション!transitionとanimationまとめ(サンプル付き)

最終更新日:

公開日:2014年08月12日

HTML

こんにちは、くーへいです。

先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。

今回はみんな大好き、アニメーションです!
jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。
グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。

IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。

CSS3におけるトランジション(transition)とアニメーション(animation)の違い

パッと見では分かりにくいのですが、違いは以下の通りです。

  • トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能
  • トランジションでは実行後に元のプロパティ値に戻る
  • アニメーションでは細かい設定が可能

transitionはお手軽なアニメーション、animationは本格的なアニメーション」と覚えておけば問題ないでしょう。

対応ブラウザ

CSS3のトランジションおよびアニメーションの対応ブラウザは以下の通りです。
アニメーションでwebkit系においてはベンダープレフィックスが必要になる以外は、大きな違いがありません。

トランジション(transition)

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

アニメーション(animation)

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

※Chrome、Safari、Android標準ブラウザではベンダープレフィックスが必要
※Android標準ブラウザではバージョン2系や3系でバグがあるので注意

CSS3のトランジション(transition)で出来ること

トランジションのプロパティは以下の通りです。

  • transition-propertyプロパティ・・・トランジションを適用するプロパティを指定します
  • transition-durationプロパティ・・・トランジションにかける時間を指定します
  • transition-timing-functionプロパティ・・・トランジション実行中の変更速度を指定できます
  • transition-delayプロパティ・・・トランジション実行やプロパティ変更の際の待ち時間を指定します
  • transitionプロパティ(ショートハンド)・・・上記4プロパティのショートハンドです

各プロパティの細かい値は以下の通りです。

transition-propertyプロパティ

トランジションを適用するプロパティを指定します。
ここでいうプロパティとは、CSSのプロパティを指していて、以下のプロパティが指定できます。
また、下記のリストには載っていませんが、各ショートハンド(background等)も使用できるようです。

指定できるプロパティ名 指定できる値
background-color
background-position 長さ、パーセント、calc()のリスト
border-bottom-color
border-bottom-width 長さ
border-left-color
border-left-width 長さ
border-right-color
border-right-width 長さ
border-spacing 長さのリスト
border-top-color
border-top-width 長さ
bottom 長さ、パーセント、calc()
clip rect()
color
font-size 長さ
font-weight フォントの厚み
height 長さ、パーセント、calc()
left 長さ、パーセント、calc()
letter-spacing 長さ
line-height 数字、もしくは長さ
margin-bottom 長さ
margin-left 長さ
margin-right 長さ
margin-top 長さ
max-height 長さ、パーセント、calc()
max-width 長さ、パーセント、calc()
min-height 長さ、パーセント、calc()
min-width 長さ、パーセント、calc()
opacity 数字
outline-color
outline-width 長さ
padding-bottom 長さ
padding-left 長さ
padding-right 長さ
padding-top 長さ
right 長さ、パーセント、calc()
text-indent 長さ、パーセント、calc()
text-shadow shadowのリスト
top 長さ、パーセント、calc()
vertical-align 長さ
visibility visibilityの値
width 長さ、パーセント、calc()
word-spacing 長さ
z-index 整数

transition-duration

現在のプロパティから、イベント後のプロパティに完全に変化するまでの時間を指定します。
初期値は0sです。

0sであれば瞬時に切り替わります。
2sとすると、完全に切り替わるのに2秒かけることになります。

transition-timing-function

サンプル

マウスオーバーすると、横幅と背景色が2秒かけて変化します。

ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps()
cubic-bezier()

 解説

プロパティの変化の速度を指定します。

一定の速度で切り替わったり、最初と最後だけ遅かったり、ということが指定可能です。

下記の値が指定可能です。
初期値はeaseです。

  • ease・・・滑らかに変化します(最初と最後がゆっくり)。cubic-bezier(0.25, 0.1, 0.25, 1)と同じ値です。
  • linear・・・一定の速度で変化します。cubic-bezier(0, 0, 1, 1)と同じ値です。
  • ease-in・・・最初はゆっくりで、だんだん速くなります。cubic-bezier(0.42, 0, 1, 1)と同じ値です。
  • ease-out・・・最初は速く、だんだんゆっくりになります。cubic-bezier(0, 0, 0.58, 1)と同じ値です。
  • ease-in-out・・・easeと似ていますが、速度が異なります。cubic-bezier(0.42, 0, 0.58, 1)と同じ値です。
  • step-start・・・滑らかな変化ではなく、一瞬で変化します。step-startは乗せた瞬間に変化しますので、通常のhoverと同様の動きに見えます。steps(1, start)と同じ値です。
  • step-end・・・こちらも、一瞬で変化しますが、transition-durationの時間がたった後で変化します。steps(1, end)と同じ値です。
  • steps(数字, start or end)・・・1つ目の引数は数字、2つ目の引数はstartかendとなっている必要があります。1つ目の引数はいくつのステップを踏むかを設定します。2つ目の引数はstartであれば、イベントが起きた瞬間に1ステップ目が実行されます。endであれば、イベントが起きた瞬間は変化がないように見えます。下の例であれば、steps(3,start)のときは0s、0.66s、1.33sに変化がありますし、steps(3,end)の時は0.66s、1.33s、2sの時に変化があります。
  • cubic-bezier(数字, 数字, 数字, 数字)・・・ベジェ曲線の形を指定します。いずれの数字も小数点が指定できます。最初と3番目の引数は0~1の間となっている必要があります。引数は必ず4つになっている必要があります。

transition-delay

指定した秒数だけ、イベントの発生を遅らせます。

transition-delay:1sと指定すれば、1秒間は何も起きません。

transition(ショートハンド)

上記の4プロパティを1度に指定できます。

transition:transition-property transition-duration transition-timing-function transition-delay;

のように指定します。

ただし、transition-propertyプロパティの分だけ、カンマで区切る必要があります。
上記のeaseにおけるサンプルでいうと、下記のように書き換えられます。

transition:background 2s ease 1s,width 2s ease 1s;

なお、Chromeではtransition-propertyを省略すると、all(全てのプロパティに適用)と解釈されました。

CSS3のアニメーション(animation)で出来ること

それでは、アニメーションで出来ることを、トランジションと比較しながら見て行きましょう。

アニメーションのプロパティは以下の通りです。

  • animation-nameプロパティ・・・アニメーションに対して名前を付けます。
  • animation-durationプロパティ・・・アニメーション1回の実行にかける時間を指定します
  • animation-timing-functionプロパティ・・・アニメーション実行中の変更速度を指定できます
  • animation-iteration-countプロパティ・・・アニメーションを繰り返す数を指定します
  • animation-directionプロパティ・・・アニメーションを繰り返す際、アニメーションの方向を反対にする等の指定ができます
  • animation-play-stateプロパティ・・・アニメーションの実行、および停止を指定できます
  • animation-delayプロパティ・・・アニメーション実行やプロパティ変更の際の待ち時間を指定します
  • animation-fill-modeプロパティ・・・アニメーション実行後、当該要素のスタイルを元に戻さず、変化したままのスタイルを維持するかどうかを指定できます
  • animationプロパティ(ショートハンド)・・・上記8プロパティのショートハンドです

勘のいい人は気づいたかもしれませんが、上記のプロパティだけではどの部分をアニメーションさせるかが指定できません。
そこで、「@keyframes」ルールを使用します。

  • @keyframesルール・・・animation-nameを指定して、各アニメーションの進行状況ごとに変化させるプロパティを指摘できます。

animation-name

アニメーションに対して名前を付けます。
名前がない場合はアニメーションが実行されません。

アニメーションの名前は@keyframesルールで使用することができ、アニメーション中の中間点におけるスタイルも指定できます。

@keyframes

動きがすごくキモイですが、こんな感じみょーんと動きます。

下記のような形式で、通過点ごとのスタイルを指定します。

@keyframes アニメーション名 {
通過点{}
}

アニメーション名はanimation-nameプロパティで指定したもの、通過点は「to」、「from」、「パーセント」のいずれかで指定できます。
コンマで区切って複数記載することも可能です。

例としては、以下の通りです。

@keyframes example {
0% { width: 100px; background-color: #000; }
30% { width: 50px; }
60%, 80% { width: 150px; }
100% { width: 200px; background-color: #fff; }
}

上のサンプルでは、60%, 80%と同じスタイルを指定していることで、その間は動きが止まっているのがわかります。
また、途中で一部スタイルを指定しなかったとしても、補完できるスタイルであれば自動で保管してくれます。

animation-duration

トランジションと同様にアニメーションにかける時間を指定しますが、アニメーションの場合は、この時間は1回の実行にかける時間を意味します。

animation-timing-function

こちらもトランジションと同様にアニメーション実行中の変更速度を指定できます。
詳細は「transition-timing-function」の項を参考にしてください。

なお、@keyframesルール時にはアニメーション全体の変更速度を指定することはできず、各キーフレーム間における変更速度を指定することになります。

animation-iteration-count

アニメーションの繰り返し回数を指定します。
infinite、もしくは数字が指定できます。
初期値は1です。

infiniteを指定すると、無限に繰り返します。

animation-direction

サンプル

normal
reverse
alternate
alternate-reverse

解説

アニメーションの実行方向を指定します。

指定できる値は以下の通り。
初期値はnormal

  • normal・・・標準の方向で実行します
  • reverse・・・逆順で実行します
  • alternate・・・繰り返し回数が奇数の場合は標準、偶数の場合は逆順で実行します
  • alternate-reverse・・・繰り返し回数が奇数の場合は逆順、偶数の場合は標準で実行します

animation-play-state

:hover時にアニメーションを停止する例

解説

アニメーションが実行中か、停止中かを指定できます。

一見使い道がなさそうですが、マウスオーバー時は停止するなど、アイデア次第でいろいろな使い方ができます。

animation-duration

トランジションと同様にアニメーションのスタートまでの待ち時間を指定します。
マイナスを指定すると、繰り返し再生の際に指定秒だけ巻戻った状態からスタートします。

animation-fill-mode

サンプル

下記サンプルではややわかりづらいのですが、念のため掲載しておきます。
アニメーションは一回しか実行されませんので、リロードしてご覧ください。

none
forwards
backwards
both

解説

アニメーション実行後、当該要素のスタイルを元に戻さず、変化したままのスタイルを維持するかどうかを指定できます。

指定できる値は以下の通り。

none

変更後のスタイルを維持しません

forwards

アニメーション実行後のスタイルは、keyframesで通常は100%もしくはtoが指定されたものになります。
animation-directionやanimation-iteration-countの値によっては、下記のように変化します。

animation-direction animation-iteration-count last keyframe encountered
normal 偶数もしくは奇数 100% もしくは to
reverse 偶数もしくは奇数 0% もしくは from
alternate 偶数 0% もしくは from
alternate 奇数 100% もしくは to
alternate-reverse 偶数 100% もしくは to
alternate-reverse 奇数 0% もしくは from

※Mozilla Developer Networkより抜粋

backwards

アニメーション実行後のスタイルは、keyframesで通常は0%もしくはfromが指定されたものになります。
また、animation-delayで指定した時間中も、同様のスタイルが適用されます。

animation-direction first relevant keyframe
normal or alternate 0% or from
reverse or alternate-reverse 100% or to

※Mozilla Developer Networkより抜粋

both

forwardsとbackwardsの両方の規定に従います。

animation

animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

のように指定します。

ただし、animation-nameプロパティの分だけ、カンマで区切る必要があります。

まとめ

CSS3のみで出来るアニメーションについて解説してきましたが、いかがでしたでしょうか。
トランジションとアニメーションの2つがあってややこしいですが、覚えておいて損はないはずです。

PCにおける対応ブラウザが少々限られますが、幅広いブラウザで使用可能なのも魅力でしょう。
凝ったアニメーションでなければJavaScriptを使用する必要もなく、CSS3だけで実現できます。

是非、試してみて下さい!

  • このエントリーをはてなブックマークに追加

関連記事

Twitterにて更新情報などを配信しています

スポンサードリンク