CSSアニメーション
CSSアニメーション
CSSを使用すると、JavaScriptやFlashを使用せずにHTML要素のアニメーションを作成できます。
この章では、次のプロパティについて学習します。
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
アニメーションのブラウザサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
CSSアニメーションとは何ですか？
アニメーションでは、要素をあるスタイルから別のスタイルに徐々に変更できます。
CSSプロパティは、何度でも変更できます。
CSSアニメーションを使用するには、最初にアニメーションのいくつかのキーフレームを指定する必要があります。
キーフレームは、要素が特定の時間に持つスタイルを保持します。
@keyframesルール
ルール内でCSSスタイルを指定する@keyframes
と、アニメーションは特定の時間に現在のスタイルから新しいスタイルに徐々に変化します。
アニメーションを機能させるには、アニメーションを要素にバインドする必要があります。
次の例では、「example」アニメーションを<div>要素にバインドします。アニメーションは4秒間続き、<div>要素の背景色が「赤」から「黄色」に徐々に変化します。
例
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
注：このanimation-durationプロパティは、アニメーションが完了するまでにかかる時間を定義します。プロパティが指定されていない場合animation-duration、デフォルト値は0秒（0秒）であるため、アニメーションは発生しません。
上記の例では、キーワード「from」と「to」（0％（開始）と100％（完了）を表す）を使用して、スタイルがいつ変更されるかを指定しました。
パーセントを使用することも可能です。パーセントを使用すると、必要な数のスタイル変更を追加できます。
次の例では、アニメーションが25％完了したとき、50％完了したとき、およびアニメーションが100％完了したときに、<div>要素の背景色を変更します。
例
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
次の例では、アニメーションが25％完了、50％完了、およびアニメーションが100％完了したときに、背景色と<div>要素の位置の両方を変更します。
例
/* The animation code */
@keyframes example
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
アニメーションを遅らせる
このanimation-delayプロパティは、アニメーションの開始の遅延を指定します。
次の例では、アニメーションを開始する前に2秒の遅延があります。
例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
負の値も許可されます。負の値を使用すると、アニメーションはすでにN秒間再生されているかのように開始されます。
次の例では、アニメーションはすでに2秒間再生されているかのように開始されます。
例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
アニメーションを実行する回数を設定する
このanimation-iteration-countプロパティは、アニメーションを実行する回数を指定します。
次の例では、アニメーションが停止する前に3回実行します。
例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
次の例では、値「infinite」を使用して、アニメーションを永久に継続させます。
例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
アニメーションを逆方向または交互のサイクルで実行する
このanimation-directionプロパティは、アニメーションを順方向、逆方向、または交互のサイクルで再生するかどうかを指定します。
Animation-directionプロパティには、次の値を指定できます。
normal-アニメーションは通常どおり再生されます（順方向）。これはデフォルトですreverse-アニメーションは逆方向（逆方向）に再生されますalternate-アニメーションは最初に順方向に再生され、次に逆方向に再生されますalternate-reverse-アニメーションは最初に逆方向に再生され、次に順方向に再生されます
次の例では、アニメーションを逆方向（逆方向）に実行します。
例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
次の例では、値「alternate」を使用して、アニメーションを最初に順方向に実行し、次に逆方向に実行します。
例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
次の例では、値「alternate-reverse」を使用して、アニメーションを最初に逆方向に実行し、次に順方向に実行します。
例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
アニメーションの速度曲線を指定します
このanimation-timing-functionプロパティは、アニメーションの速度曲線を指定します。
alarm-timing-functionプロパティには、次の値を指定できます。
ease-開始が遅く、次に速く、次にゆっくり終了するアニメーションを指定します（これがデフォルトです）linear-開始から終了まで同じ速度のアニメーションを指定しますease-in-開始が遅いアニメーションを指定しますease-out-スローエンドのアニメーションを指定しますease-in-out-開始と終了が遅いアニメーションを指定しますcubic-bezier(n,n,n,n)-キュービックベジェ関数で独自の値を定義できます
次の例は、使用できるさまざまな速度曲線の一部を示しています。
例
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}
アニメーションの塗りつぶしモードを指定します
CSSアニメーションは、最初のキーフレームが再生される前、または最後のキーフレームが再生された後、要素に影響を与えません。Animation-fill-modeプロパティは、この動作をオーバーライドできます。
このanimation-fill-modeプロパティは、アニメーションが再生されていないとき（開始前、終了後、またはその両方）のターゲット要素のスタイルを指定します。
Animation-fill-modeプロパティには、次の値を指定できます。
none-デフォルト値。アニメーションは、実行前または実行後に要素にスタイルを適用しませんforwards-要素は、最後のキーフレームによって設定されたスタイル値を保持します（animation-directionとanimation-iteration-countによって異なります）backwards-要素は、最初のキーフレームによって設定されたスタイル値を取得し（アニメーションの方向によって異なります）、アニメーションの遅延期間中はこれを保持しますboth-アニメーションは順方向と逆方向の両方のルールに従い、アニメーションのプロパティを両方向に拡張します
次の例では、アニメーションの終了時に<div>要素が最後のキーフレームのスタイル値を保持します。
例
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
次の例では、<div>要素で、アニメーションが開始する前（アニメーションの遅延期間中）に最初のキーフレームで設定されたスタイル値を取得します。
例
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
次の例では、<div>要素がアニメーション開始前に最初のキーフレームによって設定されたスタイル値を取得し、アニメーションが終了したときに最後のキーフレームからのスタイル値を保持します。
例
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
アニメーション速記プロパティ
以下の例では、6つのアニメーションプロパティを使用しています。
例
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
上記と同じアニメーション効果は、省略形の
animationプロパティを使用して実現できます。
例
div
{
animation: example 5s linear 2s infinite alternate;
}
CSSアニメーションのプロパティ
次の表に、@ keyframesルールとすべてのCSSアニメーションプロパティを示します。
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |