通过按钮的click事件反复触发一个元素的css3动画，点击一次，动画效果就跑一次。
看码——
html：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试页面</title>
<script id="jquery_183" type="text/javascript" src="//runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="testDiv01">
</div>
<button id="testBtn01">反复触发transition</button>
<br>
<div id="testDiv02">
</div>
<button id="testBtn02">反复触发animation</button>
</body>
javascript：
let [testDiv01,testDiv02,testBtn01,testBtn02]=[$('#testDiv01'),$('#testDiv02'),$('#testBtn01'),$('#testBtn02')]testBtn01.on('click',function () {
testDiv01.addClass('transi')
let t = setTimeout(()=>{
testDiv01.removeClass('transi')
clearTimeout(t)
},500)
})
testBtn02.on('click',function () {
testDiv02.addClass('ani')
let t = setTimeout(()=>{
testDiv02.removeClass('ani')
clearTimeout(t)
},500)
})
css：
body {padding: 20px
}
.testDiv {
width: 100px
height: 100px
border-radius: 50%
background-color: #e0a718
}
.testDiv.ani {
-webkit-animation: pop 200ms ease 0ms
animation: pop 200ms ease 0ms
}
.testDiv.transi {
-webkit-transform: scale(1.2)
transform: scale(1.2)
-webkit-transition: -webkit-transform 0.5s
transition: -webkit-transform 0.5s
transition: transform 0.5s
transition: transform 0.5s, -webkit-transform 0.5s
}
.testBtn {
margin-top: 20px
height: 30px
padding: 0px 10px
border: 1px solid #CCCCCC
}
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0)
transform: scale(0)
}
50% {
-webkit-transform: scale(1.2)
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1)
transform: scale(1)
}
}
@keyframes pop {
0% {
-webkit-transform: scale(0)
transform: scale(0)
}
50% {
-webkit-transform: scale(1.2)
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1)
transform: scale(1)
}
}
transform 不会使DOM脱离文档流，当通过 translateX 等属性值移动了元素后，它仍然占据原来的位置。好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。
