你的位置:首页 > 软件开发 > 网页设计 > CSS3动画事件

CSS3动画事件

发布时间:2015-09-29 18:00:17
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件。animationstartanimationend以下是一个示例<!DOCTYPE html><html><head> <meta charse ...

CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件。

  1. animationstart
  2. 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>

原标题:CSS3动画事件

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。