CSS3アニメーションプロパティの使い方

@keyframes ルールとすべての 属性を集めてください。@keyframes が規定のアニメーションを意味することは誰もが知っています。誰もが理解できるように、実際的な例を見てみましょう。 プロパティ 説明 CSS@keyframes アニメーションを指定します。

animation anime-play-state プロパティを除く、すべてのアニメーション プロパティの短縮形プロパティ。

animation-name は @keyframes アニメーションの名前を指定します。

animation-duration は、アニメーションが 1 サイクル完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。

animation-timing-function アニメーションのスピードカーブを指定します。デフォルトは「簡単」です。

animation-delay は、アニメーションがいつ開始されるかを指定します。デフォルトは 0 です。

animation-iteration-

は、アニメーションが再生される回数を指定します。デフォルトは 1 です。

animation-direction 次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。

animation-play-state は、アニメーションが実行中か一時停止中かを指定します。デフォルトは「実行中」です。 次の 2 つの例は、すべてのアニメーション プロパティを設定します:

OperaSafari

omeFirefoxInternet Explorer

Example初めてのアニメーションを実行し、すべてのプロパティを設定します:

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

他の
関連記事については、php中国語ウェブサイトにご注意ください!

関連記事:

H5を使用して花火の粒子の特殊効果を作成する方法

CSSを使用せずにマウスホバースタイルを変更する方法

以上がCSS3アニメーションプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。