CSS3 animationプロパティでアニメーションを実装する

CSS3のanimationプロパティは、transitionプロパティに比べて複雑なアニメーションを実装するのに適しています。リピート再生や、キーフレームを定義することによりアニメーション中の動作を細かく設定することが可能です。

【コンテンツ】

  1. 仕様策定の動向とブラウザの対応状況
  2. キーフレームの定義
  3. 8つのanimationプロパティ
  4. アニメーションサンプル(4例)

仕様策定の動向とブラウザの対応状況

W3Cで策定している animation の仕様は、「CSS Animations」に記述されています。

記事執筆時点での最新仕様は、2013年2月19日付けの作業草案(Working Draft)です。
http://www.w3.org/TR/2013/WD-css3-animations-20130219/

主要ブラウザの最新バージョンはすべて対応しています。
webkit系のブラウザ(Chrome,Safari,Opera,iOS Safari,Androidブラウザ)は、ベンダープレフィックス「-webkit-」が必要です。
IE9以下は非対応です。

キーフレームの定義

animationプロパティを使うためには、まずキーフレーム(keyframe)を定義しなければなりません。
キーフレームとは、アニメーション全体の中にいくつかのポイントを設け、それぞれのポイントごとにCSSプロパティの値を指定するものです。つまりキーフレームでは、アニメーション1サイクルの振る舞いを規定します。

アニメーション開始時を0%(あるいはfrom)、終了時を100%(あるいはto)として、その間のポイントを%で指定します。

例えばアニメーション名を 'wobble' とすると、以下のように定義します。

@keyframes wobble {
  0% { left: 100px; }
  25% { left: 150px; }
  50% { left: 75px; }
  75% { left: 130px; }
  100% { left: 100px; }
}

8つのanimationプロパティ

animationには以下の8つのプロパティが存在します。
また8つのプロパティをまとめて、ショートハンドの 'animation' プロパティでも記述できます。

プロパティ 説明
animation-name キーフレームで定義したアニメーション名を指定します。
animation-duration アニメーション1回の開始から終了までにかける時間を指定します。
animation-timing-function アニメーションの間、どのように状態を変化させるかを指定します。
animation-iteration-count アニメーションを繰り返す回数を指定します。
animation-direction アニメーションを繰り返す際の再生方向を指定します。
animation-play-state アニメーションの停止と再開を指定します。
animation-delay アニメーション開始までの待ち時間を指定します。
animation-fill-mode アニメーションの前後の状態を指定します。

animation-name

キーフレームで定義したアニメーション名をここに指定すると実行されます。
アニメーション名は、カンマ(,)で区切り複数指定できます。
'none' を指定するとアニメーションは何も実行されません。

【記述例】

div {
   animation-name: my-animation;
}

animation-duration

ここに指定した時間をかけて、アニメーションの1サイクルが実行されます。
デフォルト値は '0s' になります。

【記述例】

div {
   animation-duration: 5s;
}

animation-timing-function

ここに指定した値で、アニメーションの速度がどのように変化するか決まります。

とりうる値はtransitionプロパティと同じで、機能を示すキーワードか関数で指定します。
キーワードには、linear,ease,ease-in,ease-out,ease-in-out,step-start,step-endがあります。関数には、steps()とcubic-bezier()があります。
デフォルト値は 'ease' になります。

【記述例】

div {
   animation-timing-function: ease-in-out, cubic-bezier(0.2, 0.3, 0.7, 0.8);
}

animation-iteration-count

ここに指定した回数、アニメーションが繰り返されます。
'infinite' を指定すると無限に繰り返します。
デフォルト値は '1' になります。

【記述例】

div {
   animation-iteration-count: 10;
}

animation-direction

アニメーションを繰り返す際、再生の方向を順方向か逆方向か指定します。

指定できる値は以下になります。デフォルト値は 'normal' です。

説明
normal すべての回で順方向にアニメーションが繰り返されます。
reverse すべての回で逆方向にアニメーションが繰り返されます。
alternate 奇数回は順方向、偶数回は逆方向にアニメーションが繰り返されます。
alternate-reverse 奇数回は逆方向、偶数回は順方向にアニメーションが繰り返されます。

【記述例】

div {
   animation-direction: alternate;
}

animation-play-state

アニメーションを実行か停止か指定できます。
'paused' を指定するとアニメーションが停止し、次に 'running' を指定すると停止状態から再開されます。
デフォルト値は 'running' になります。

【記述例】

div {
   animation-play-state: paused;
}

animation-delay

ここに指定した時間経過後にアニメーションが開始されます。
デフォルト値は '0s' になります。

【記述例】

div {
   animation-delay: 1.5s;
}

animation-fill-mode

アニメーションが開始する前と、終了した後のCSSプロパティの状態を指定できます。

指定できる値は以下になります。デフォルト値は 'none' です。

説明
none アニメーションを実行していない間は、キーフレームで定義した値の影響を受けません。
forwards アニメーションが終了したとき、その状態を維持します。
backwards animation-delayでアニメーションが待機中に、キーフレームで定義した0%(from)の状態になります。逆方向に再生するときは、キーフレームで定義した100%(to)の状態になります。
both forwardsとbackwards両方の効果があります。

【記述例】

div {
   animation-fill-mode: forwards;
}

animation (ショートハンド)

8つのプロパティの値をまとめて指定するショートハンドも用意されています。
値はスペースで区切って指定します。
カンマ(,)で区切って複数のアニメーションに対する指定もできます。

【記述例】

div {
   animation: my-animation 5s ease-in-out 1.5s 10 alternate forwards;
}

animation-duration と animation-delay は同じように秒単位の値を指定しますが、最初の値は animation-duration に適用されます。

アニメーションサンプル(4例)

それでは実際に、このWebページ上でアニメーション動作を確認できるサンプルを示しながら解説しましょう。

なお、「CSS Animations」と「CSS Transforms」に対応しているブラウザでないとアニメーションは動作しませんのでご了承ください。

アイコンの回転・拡大

アイコンにマウスオーバーするかタップしてください。
回転しながら拡大します。

50%ディスカウントマーク

HTMLとCSSコードは以下になります。
この例では、animationプロパティを省略しないで書いています。

アニメーションの停止

アイコンにマウスオーバーするかタップしてください。
回転が止まります。
animation-play-stateプロパティで、アニメーションを停止させる例です。

feedマーク

HTMLとCSSコードは以下になります。

opacityを変化させ画像を浮き上がらせる

アイコンにマウスオーバーするかタップしてください。
コーヒーカップから湯気が出ます。

湯気

HTMLとCSSコードは以下になります。

CSSだけのスライドショー

JavaScriptを使わなくてもスライドショーを実装できます。
li要素に設定した背景画像を、opacityを変化しながら順番に表示させています。

  • Slide1
  • Slide2
  • Slide3
  • Slide4

ここをクリックしてスライドショーを開始

HTMLとCSSコードは以下になります。

いかがでしたか? Webサイトで他にjQueryなどを使っているのなら、そちらでアニメーションを実装することもできますが、簡単なアニメーションなら CSS Animations でも十分です。JavaScriptに比べて処理が軽いのもメリットですので、大いに活用しましょう。

スポンサーリンク

ページの先頭へ