CSS3 のアニメーション方向属性の詳細な紹介-CSSチュートリアル-php.cn

CSS3 のアニメーション方向属性の詳細な紹介

零下一度

リリース： 2017-05-18 14:34:43

オリジナル

2854 人が閲覧しました

CSS3 アニメーション方向プロパティ、CSS リファレンスマニュアル例アニメーションを 1 回実行し、次にアニメーションを逆に実行します。オブジェクトのアニメーションがループ内で逆に動くかどうかを取得または設定します

インスタンス

最初にアニメーションを 1 回実行し、次にアニメーションを逆に実行します:

!DOCTYPE html> <html> <head> <style>
p { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate; 

/* Safari 和 Chrome */ -webkit-animation:myfirst 5s infinite; -webkit-animation-direction:alternate; }
@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 和 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;} }
</style> </head> <body> <p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。</p> <p></p> </body> </html>

ログイン後にコピー

ブラウザのサポート

Internet Explorer 10、Firefox およびOpera はアニメーション方向属性をサポートします。

Safari と Chrome は、代替プロパティである -webkit-animation-direction プロパティをサポートしています。

注: Internet Explorer 9 以前のバージョンは、アニメーション方向プロパティをサポートしていません。

定義と使用法

animation-direction 属性は、アニメーションをループして交互に逆再生するかどうかを定義します。

注: アニメーションが 1 回だけ再生されるように設定されている場合、このプロパティは効果がありません。

CSS構文

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inhe

ログイン後にコピー

【関連する推奨事項】

1. CSS3アニメーションの終了イベントを監視する例を共有します

2. マスターしなければならないCSS3アニメーション（Animation）の8つのプロパティ

アニメーション属性を使用してループ間の遅延実行を実装するサンプルチュートリアル

CSS3の2つの一時停止メソッド（トランジション、アニメーション）の詳細な説明

以上がCSS3 のアニメーション方向属性の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。