ホームページ > 記事 > ウェブフロントエンド > CSS3アニメーションevent_html/css_WEB-ITnose
CSS3アニメーションevent_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:36:08892ブラウズ
CSS3 には強力なアニメーション効果があり、モバイル端末で広く使用されており、JS を使用してアニメーション実行の開始時と終了時にそのイベントを監視できます。
- animationstart
- animationend
以下は例です
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>CSS3 动画事件</title> <style type="text/css"> h1 { animation-duration: 3s; animation-name: slidein;/* animation-iteration-count: infinite; animation-direction: alternate; */ } @keyframes slidein { from { margin-left: 100%; width: 100%; } to { margin-left: 0%; width: 100%; } } </style></head> <body> <h1 id="ani">Test CSS3 SlideIn</h1> <script> ani.addEventListener('animationstart', function() { console.log('animate start') }, false); ani.addEventListener('animationend', function() { console.log('animate end') }, false); </script></body></html>
アニメーションイベントを追加することで、いくつかの画像を連続して表示できます。
関連:
http://www.w3.org/TR/css3-animations/#animation-events
https://developer.mozilla.org/en-US/docs/Web/CSS/ CSS_アニメーション/CSS_アニメーションの使用
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。