CSS3 には強力なアニメーション効果があり、モバイル端末で広く使用されており、JS を使用してアニメーション実行の開始時と終了時にそのイベントを監視できます。
以下は例です
<!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_アニメーションの使用
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
