animation-play-state 属性は、アニメーションが実行中か一時停止かを指定するために使用されます。これを JavaScript で使用すると、再生中にアニメーションを一時停止する効果を実現できます。
#CSS3 アニメーション再生状態プロパティ
関数:animation- play-state 属性は、アニメーションが実行中か一時停止中かを指定します。
構文:
animation-play-state: paused|running;
説明: JavaScript でこの属性を使用すると、再生中にアニメーションを一時停止できます。
注: Internet Explorer 9 以前のバージョンは、animation-play-state 属性をサポートしていません。
CSS3 アニメーション再生状態属性の使用例
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s; animation-play-state:running; /* Safari and Chrome */ -webkit-animation:mymove 5s; -webkit-animation-play-state:running; } div:hover{ animation-play-state:paused; -webkit-animation-play-state:paused; } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {left:0px;} to {left:200px;} } </style> </head> <body> <div></div> </body> </html>
以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ! !
以上がアニメーション再生状態プロパティの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。