CSS3アニメーション

CSS3アニメーション

CSS3、我々は多くのページアニメーション画像、Flashアニメーション、およびJavaScriptを置き換えることができ、アニメーションを作成することができます。

CSS3 @keyframesルール

CSS3アニメーションを作成するには、@keyframesルールを学ぶ必要があります。

@keyframesルールは、アニメーションを作成することです。 CSSスタイルを指定して、アニメーションが徐々に@keyframesルール内の現在のスタイルから新しいスタイルに変更されます。

ブラウザのサポート

表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。

すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。

例

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

CSS3アニメーション

アニメーション@keyframesを作成する場合は、セレクタにバインドし、そうでなければ、アニメーションの効果はありません。

CSS3アニメーションプロパティはセレクタにバインドされている少なくとも二つの指定：

• これは、アニメーションの名前を指定します
• ときに所定の長さアニメーション

例

div要素の持続時間に縛ら「myfirst "アニメーション：5秒：

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

»をお試しください

注：アニメーションとアニメーション名の期間を定義する必要があります。あなたがアニメーションの継続時間を省略した場合、デフォルト値は0であるため、実行されません。

CSS3アニメーションとは何ですか？

アニメーション要素は、別のスタイルの効果への一つのスタイルから徐々に変化することです。

あなたは何回限り多くのスタイルを変更することができます。

所定の時間で変化率を使用する、またはキーワード」から "と"へ "、0％から100％に相当してください。

0％は、アニメーションが100％完了すると、アニメーションの始まりです。

最高のブラウザのサポートのために、あなたは常に0％とセレクタの100％を定義する必要があります。

例

アニメーションが再び変更時のアニメーションが25％、50％、および100％完了すると、背景色を変更します。

@keyframes myfirst
{
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;}
}

»をお試しください

例

背景色と場所を変更します。

@keyframes myfirst
{
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ルールとすべてのアニメーションのプロパティを示しています。

次の2つの例は、すべてのアニメーションのプロパティを設定します。

例

myfirstアニメーションを実行し、すべての属性を設定します。

div
{
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;
}

»をお試しください

例

同じ上記のアニメーションが、短いアニメーションアニメーションプロパティを持ちます：

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

»をお試しください