CSS3アニメーション2024 年の最新の入門チュートリアル。このコースでは CSS3アニメーション,CSS3 @keyframesルール,ブラウザのサポート,例,CSS3アニメーション,例,CSS3アニメーションとは何ですか?,例,例,CSS3のアニメーションプロパティ,例,例, について学習できます。
CSS3、我々は多くのページアニメーション画像、Flashアニメーション、およびJavaScriptを置き換えることができ、アニメーションを作成することができます。
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- |
アニメーション@keyframesを作成する場合は、セレクタにバインドし、そうでなければ、アニメーションの効果はありません。
CSS3アニメーションプロパティはセレクタにバインドされている少なくとも二つの指定:
div要素の持続時間に縛ら「myfirst "アニメーション:5秒:
注:アニメーションとアニメーション名の期間を定義する必要があります。あなたがアニメーションの継続時間を省略した場合、デフォルト値は0であるため、実行されません。
アニメーション要素は、別のスタイルの効果への一つのスタイルから徐々に変化することです。
あなたは何回限り多くのスタイルを変更することができます。
所定の時間で変化率を使用する、またはキーワード」から "と"へ "、0%から100%に相当してください。
0%は、アニメーションが100%完了すると、アニメーションの始まりです。
最高のブラウザのサポートのために、あなたは常に0%とセレクタの100%を定義する必要があります。
アニメーションが再び変更時のアニメーションが25%、50%、および100%完了すると、背景色を変更します。
背景色と場所を変更します。
次の表は、@keyframesルールとすべてのアニメーションのプロパティを示しています。
プロパティ | 説明 | CSS |
---|---|---|
@keyframes | 引当金アニメーション。 | 3 |
アニメーション | アニメーションプレイ-stateプロパティに加えて、すべてのアニメーションプロパティの簡略記述特性、。 | 3 |
アニメーション名 | 名前@keyframesアニメーションを指定します。 | 3 |
アニメーションの継続時間 | 引当金のアニメーションは、秒またはミリ秒のサイクルを完了するのにかかります。 デフォルトは0です。 | 3 |
アニメーションタイミング機能 | アニメーションカーブの所定の速度。 デフォルトは "楽"です。 | 3 |
アニメーションの遅延 | ときに所定のアニメーションが開始されます。 デフォルトは0です。 | 3 |
アニメーションの繰り返しカウント | 所定のアニメーションが再生された回数。 デフォルトは1です。 | 3 |
アニメーション方向 | アニメーションの規定は、次のサイクルに逆に再生するかどうか。 デフォルトは「正常」です。 | 3 |
アニメーションプレイ状態 | かどうかは、アニメーションの規定は、実行中または一時停止されています。 デフォルトでは、「実行」されています。 | 3 |
次の2つの例は、すべてのアニメーションのプロパティを設定します。
myfirstアニメーションを実行し、すべての属性を設定します。
同じ上記のアニメーションが、短いアニメーションアニメーションプロパティを持ちます: