CSS3アニメーション
CSS3アニメーション
CSS3、我々は多くのページアニメーション画像、Flashアニメーション、およびJavaScriptを置き換えることができ、アニメーションを作成することができます。
アニメーション
CSS3 @keyframesルール
CSS3アニメーションを作成するには、@keyframesルールを学ぶ必要があります。
@keyframesルールは、アニメーションを作成することです。 CSSスタイルを指定して、アニメーションが徐々に@keyframesルール内の現在のスタイルから新しいスタイルに変更されます。
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
属性 | |||||
---|---|---|---|---|---|
@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- |
例
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
CSS3アニメーション
アニメーション@keyframesを作成する場合は、セレクタにバインドし、そうでなければ、アニメーションの効果はありません。
CSS3アニメーションプロパティはセレクタにバインドされている少なくとも二つの指定:
- これは、アニメーションの名前を指定します
- ときに所定の長さアニメーション
例
div要素の持続時間に縛ら「myfirst "アニメーション:5秒:
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
»をお試しください
注:アニメーションとアニメーション名の期間を定義する必要があります。あなたがアニメーションの継続時間を省略した場合、デフォルト値は0であるため、実行されません。
CSS3アニメーションとは何ですか?
アニメーション要素は、別のスタイルの効果への一つのスタイルから徐々に変化することです。
あなたは何回限り多くのスタイルを変更することができます。
所定の時間で変化率を使用する、またはキーワード」から "と"へ "、0%から100%に相当してください。
0%は、アニメーションが100%完了すると、アニメーションの始まりです。
最高のブラウザのサポートのために、あなたは常に0%とセレクタの100%を定義する必要があります。
例
アニメーションが再び変更時のアニメーションが25%、50%、および100%完了すると、背景色を変更します。
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
»をお試しください
例
背景色と場所を変更します。
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
»をお試しください
CSS3のアニメーションプロパティ
次の表は、@keyframesルールとすべてのアニメーションのプロパティを示しています。
プロパティ | 説明 | CSS |
---|---|---|
@keyframes | 引当金アニメーション。 | 3 |
アニメーション | アニメーションプレイ-stateプロパティに加えて、すべてのアニメーションプロパティの簡略記述特性、。 | 3 |
アニメーション名 | 名前@keyframesアニメーションを指定します。 | 3 |
アニメーションの継続時間 | 引当金のアニメーションは、秒またはミリ秒のサイクルを完了するのにかかります。 デフォルトは0です。 | 3 |
アニメーションタイミング機能 | アニメーションカーブの所定の速度。 デフォルトは "楽"です。 | 3 |
アニメーションの遅延 | ときに所定のアニメーションが開始されます。 デフォルトは0です。 | 3 |
アニメーションの繰り返しカウント | 所定のアニメーションが再生された回数。 デフォルトは1です。 | 3 |
アニメーション方向 | アニメーションの規定は、次のサイクルに逆に再生するかどうか。 デフォルトは「正常」です。 | 3 |
アニメーションプレイ状態 | かどうかは、アニメーションの規定は、実行中または一時停止されています。 デフォルトでは、「実行」されています。 | 3 |
次の2つの例は、すべてのアニメーションのプロパティを設定します。
例
myfirstアニメーションを実行し、すべての属性を設定します。
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
»をお試しください
例
同じ上記のアニメーションが、短いアニメーションアニメーションプロパティを持ちます:
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
»をお試しください