ホームページ > 記事 > ウェブフロントエンド > CSS3アニメーションプロパティの使い方
@keyframes ルールとすべての 属性を集めてください。@keyframes が規定のアニメーションを意味することは誰もが知っています。誰もが理解できるように、実際的な例を見てみましょう。 プロパティ 説明 CSS@keyframes アニメーションを指定します。
animation anime-play-state プロパティを除く、すべてのアニメーション プロパティの短縮形プロパティ。
animation-name は @keyframes アニメーションの名前を指定します。
animation-duration は、アニメーションが 1 サイクル完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。
animation-timing-function アニメーションのスピードカーブを指定します。デフォルトは「簡単」です。
animation-delay は、アニメーションがいつ開始されるかを指定します。デフォルトは 0 です。
animation-iteration-
countは、アニメーションが再生される回数を指定します。デフォルトは 1 です。
animation-direction 次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。
animation-play-state は、アニメーションが実行中か一時停止中かを指定します。デフォルトは「実行中」です。 次の 2 つの例は、すべてのアニメーション プロパティを設定します:
OperaSafari
ChromeFirefoxInternet 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中国語ウェブサイトにご注意ください!
以上がCSS3アニメーションプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。