CSS3动画事件

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>

通过添加动画事件，可以依次把一些图片展示出来。

Snandy

CSS3动画事件

导航

公告