在CSS3的animation中,添加了三个API函数,使我们可以更好的控制动画效果。
首先抛出菜鸟给出的解释:
CSS 动画播放时,会发生以下三个事件:
animationstart - CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发
语法
object.addEventListener("
webkitAnimationStart
", myScript); // Chrome, Safari 和 Opera
object.addEventListener("webkitAnimationIteration
", myScript);// Chrome, Safari 和 Opera
object.addEventListener("webkitAnimationEnd
", myScript);// Chrome, Safari 和 Opera
‘----------------------------------------------------------------------------------’
object.addEventListener("animationstart
", myScript); // 标准语法
object.addEventListener("animationiteration
", myScript); // 标准语法
object.addEventListener("animationend
", myScript);// 标准语法
然后是在Chrome浏览器上实践:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document<