Home > Web Front-end > HTML Tutorial > CSS3动画事件_html/css_WEB-ITnose

CSS3动画事件_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:36:08
Original
904 people have browsed it

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>
Copy after login

 

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

 

相关:

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

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

 

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template