好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS3动画事件_html/css_WEB-ITnose

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

animationstart animationend

以下是一个示例

        	                          CSS3 动画事件      		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%;		  }		}         	

Test CSS3 SlideIn

ani.addEventListener('animationstart', function() { console.log('animate start') }, false); ani.addEventListener('animationend', function() { console.log('animate end') }, false);

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

相关:

http://www.w3.org/TR/css3-animations/#animation-events

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

查看更多关于CSS3动画事件_html/css_WEB-ITnose的详细内容...

  阅读:32次