ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 のアニメーション方向属性の詳細な紹介
CSS3 のアニメーション方向属性の詳細な紹介
- 零下一度オリジナル
- 2017-05-18 14:34:432858ブラウズ
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つのプロパティ
3.アニメーション属性を使用してループ間の遅延実行を実装するサンプルチュートリアル
4.CSS3の2つの一時停止メソッド（トランジション、アニメーション）の詳細な説明
以上がCSS3 のアニメーション方向属性の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。