CSS3 animationプロパティでアニメーションを実装する
公開日：2014年9月13日
最終更新日：2019年4月6日
CSS3のanimationプロパティは、transitionプロパティに比べて複雑なアニメーションを実装するのに適しています。リピート再生や、キーフレームを定義することによりアニメーション中の動作を細かく設定することが可能です。
【コンテンツ】
仕様策定の動向とブラウザの対応状況
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プロパティの値を指定するものです。つまりキーフレームでは、アニメーション１サイクルの振る舞いを規定します。
アニメーション開始時を0%(あるいはfrom)、終了時を100%(あるいはto)として、その間のポイントを%で指定します。
例えばアニメーション名を 'wobble' とすると、以下のように定義します。
@keyframes wobble {
0% { left: 100px; }
25% { left: 150px; }
50% { left: 75px; }
75% { left: 130px; }
100% { left: 100px; }
}
８つのanimationプロパティ
animationには以下の８つのプロパティが存在します。
また８つのプロパティをまとめて、ショートハンドの 'animation' プロパティでも記述できます。
| プロパティ | 説明 |
|---|---|
| animation-name | キーフレームで定義したアニメーション名を指定します。 |
| animation-duration | アニメーション１回の開始から終了までにかける時間を指定します。 |
| 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
ここに指定した時間をかけて、アニメーションの１サイクルが実行されます。
デフォルト値は '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 (ショートハンド)
８つのプロパティの値をまとめて指定するショートハンドも用意されています。
値はスペースで区切って指定します。
カンマ(,)で区切って複数のアニメーションに対する指定もできます。
【記述例】
div {
animation: my-animation 5s ease-in-out 1.5s 10 alternate forwards;
}
animation-duration と animation-delay は同じように秒単位の値を指定しますが、最初の値は animation-duration に適用されます。
アニメーションサンプル（４例）
それでは実際に、このWebページ上でアニメーション動作を確認できるサンプルを示しながら解説しましょう。
なお、「CSS Animations」と「CSS Transforms」に対応しているブラウザでないとアニメーションは動作しませんのでご了承ください。
アイコンの回転・拡大
アイコンにマウスオーバーするかタップしてください。
回転しながら拡大します。
HTMLとCSSコードは以下になります。
この例では、animationプロパティを省略しないで書いています。
|
1 2 3 |
<div id="an-first"> <p><img src="img/star_50off.png" width="85" height="81"></p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@-webkit-keyframes spin-discount { 0% { -webkit-transform: scale(1) rotate(0deg); } 50% { -webkit-transform: scale(1.5) rotate(30deg); } 100% { -webkit-transform: scale(1) rotate(0deg); } } @keyframes spin-discount { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.5) rotate(30deg); } 100% { transform: scale(1) rotate(0deg); } } #an-first { width: 85px; margin-left: 50px; } #an-first:hover, #an-first:active { -webkit-animation: spin-discount 2s linear infinite; animation-name: spin-discount; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-delay: 0s; animation-fill-mode: none; } |
アニメーションの停止
アイコンにマウスオーバーするかタップしてください。
回転が止まります。
animation-play-stateプロパティで、アニメーションを停止させる例です。
HTMLとCSSコードは以下になります。
|
1 2 3 |
<div id="an-second"> <p><img src="img/spinner.png" width="32" height="32"></p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #an-second { width: 32px; margin-left: 75px; -webkit-animation: spinner 5s linear infinite; animation: spinner 5s linear infinite; } #an-second:hover, #an-second:active { -webkit-animation-play-state: paused; animation-play-state: paused; } |
opacityを変化させ画像を浮き上がらせる
アイコンにマウスオーバーするかタップしてください。
コーヒーカップから湯気が出ます。
HTMLとCSSコードは以下になります。
|
1 2 3 |
<div id="an-third"> <img src="img/steam.png" width="100" height="100"> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@-webkit-keyframes coffee { 0% { opacity: 0; } 40% { opacity: 0.4; } 50% { opacity: 0.6; } 75% { opacity: 0.4; } 100% { opacity: 0; } } @keyframes coffee { 0% { opacity: 0; } 40% { opacity: 0.4; } 50% { opacity: 0.6; } 75% { opacity: 0.4; } 100% { opacity: 0; } } #an-third { width: 100px; height: 100px; margin-left: 40px; background: url(../img/coffee_cup.png) no-repeat left top; } #an-third img { opacity: 0; } #an-third img:hover, #an-third img:active { -webkit-animation: coffee 4s linear 0.5s infinite; animation: coffee 4s linear 0.5s infinite; } |
CSSだけのスライドショー
JavaScriptを使わなくてもスライドショーを実装できます。
li要素に設定した背景画像を、opacityを変化しながら順番に表示させています。
- Slide1
- Slide2
- Slide3
- Slide4
HTMLとCSSコードは以下になります。
|
1 2 3 4 5 6 |
<ul id="an-fourth"> <li>Slide1</li> <li>Slide2</li> <li>Slide3</li> <li>Slide4</li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
@-webkit-keyframes slideShow { 0% { opacity: 0; } 12% { opacity: 1; } 25% { opacity: 1; } 37% { opacity: 0; } 100% { opacity: 0; } } @keyframes slideShow { 0% { opacity: 0; } 12% { opacity: 1; } 25% { opacity: 1; } 37% { opacity: 0; } 100% { opacity: 0; } } #an-fourth { position: relative; width: 300px; height: 200px; background-color: #eee; list-style: none!important; } #an-fourth li{ position: absolute; top: 0px; left: 0px; width: 300px; height: 200px; color: transparent; opacity: 0; } #an-fourth:target li { -webkit-animation: slideShow 24s linear infinite; animation: slideShow 24s linear infinite; } #an-fourth li:nth-child(1) { background-image: url(../img/stray_cat.jpg); } #an-fourth li:nth-child(2) { background-image: url(../img/chick.jpg); -webkit-animation-delay: 6s; animation-delay: 6s; } #an-fourth li:nth-child(3) { background-image: url(../img/goat.jpg); -webkit-animation-delay: 12s; animation-delay: 12s; } #an-fourth li:nth-child(4) { background-image: url(../img/horse.jpg); -webkit-animation-delay: 18s; animation-delay: 18s; } |
いかがでしたか？ Webサイトで他にjQueryなどを使っているのなら、そちらでアニメーションを実装することもできますが、簡単なアニメーションなら CSS Animations でも十分です。JavaScriptに比べて処理が軽いのもメリットですので、大いに活用しましょう。
スポンサーリンク
