标签：
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_Animations/Using_CSS_animations
标签：
原文地址：http://www.cnblogs.com/snandy/p/4846817.html
