CSS3アニメーション
CSS3アニメーションでは、JavaScriptやFlashを使用せずに、ほとんどのHTML要素のアニメーションを可能にします！
アニメーション
アニメーションのためのブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
続いて数字-webkit-, -moz- 、または-o-接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS3アニメーションは何ですか？
アニメーション要素は徐々に別のスタイルから変更できます。
あなたが望む何回も、あなたが望む限り多くのCSSプロパティを変更することができます。
CSS3アニメーションを使用するには、まず、アニメーションのためのいくつかのキーフレームを指定する必要があります。
キーフレームは、要素が特定の時間になりますどのようなスタイルを保持します。
@keyframesルール
あなたは内部のCSSスタイルを指定すると@keyframesルールを、アニメーションは徐々に特定の時間に新しいスタイルに現在のスタイルから変更されます。
仕事にアニメーションを取得するには、要素にアニメーションをバインドする必要があります。
次の例は、「例」のアニメーションバインド<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プロパティが指定されていない場合のデフォルト値は0であるため、アニメーションは、効果がありません。
スタイルは、キーワードを使用して変更されたときに我々が指定されている上記の例では"from"と"to" （（完了）0％（開始）と100％を表します）。
パーセントを使用することも可能です。 あなたが好きなようにパーセントを使用することにより、あなたは、多くのスタイルの変更を追加することができます。
次の例では、背景色変更され<div>アニメーションが100％完了すると再びアニメーションが25％完了したときに、要素を50％完了、および：
例
/* 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;
} »それを自分で試してみてください 次の例では、背景色との位置の両方を変更します<div>アニメーションが100％完了すると再びアニメーションが25％完了したときに、要素を50％完了、および：
例
/* 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;
} »それを自分で試してみてください アニメーションを実行する回数を設定します
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プロパティは、逆方向または代替サイクルでアニメーションを実行させるために使用されます。
次の例では、逆方向にアニメーションを実行します：
例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} »それを自分で試してみてください 次の例では、値を使用して"alternate"のアニメーションが最初に前方その後、後方その後、前方に実行するために：
例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} »それを自分で試してみてください アニメーションの速度曲線を指定します
animation-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;} »それを自分で試してみてください アニメーション速記プロパティ
以下の例は、アニメーションのプロパティの6を使用しています。
例
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
»それを自分で試してみてください 上記と同様のアニメーション効果は、速記使用することによって達成することができるanimationプロパティ。
練習で自分自身をテスト！
CSS3アニメーションのプロパティ
次の表に@keyframesルールとすべてのアニメーションのプロパティを：
| プロパティ | 説明 |
|---|---|
| @keyframes | アニメーションコードを指定します。 |
| animation | すべてのアニメーションプロパティを設定するための簡略記述特性 |
| animation-delay | アニメーションの開始の遅延を指定します。 |
| animation-direction | アニメーションが逆方向または代替サイクルでプレーするかどうかを指定します |
| animation-duration | アニメーションが1サイクルを完了するのにかかる秒数またはミリ秒単位で指定します |
| animation-fill-mode | アニメーションが再生されていないときに要素のスタイルを指定する（それが終了したとき、またはそれが遅延を有する場合） |
| animation-iteration-count | アニメーションを再生する回数を指定します。 |
| animation-name | @keyframesアニメーションの名前を指定します。 |
| animation-play-state | アニメーションが実行中または一時停止しているかどうかを指定します |
| animation-timing-function | アニメーションの速度曲線を指定します。 |