Home > Article > Web Front-end > CSS3动画事件_html/css_WEB-ITnose
CSS3动画事件_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:08891browse
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_Animations/Using_CSS_animations
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css样式之背景图片_html/css_WEB-ITnoseNext article：[iOS Animation]-CALayer 显示方式-contentsScale_html/css_WEB-ITnose