通过按钮的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)
}
}
楼上用的jQuery，我回答下js怎么做：
1、使用DOM获取到要修改的element，假设这个div的id=”container“：
var elem = document.getElementById("container")2、修改elem的样式：
elem.style.cssText = "-webkit-border-radius:50px"注意！getElementById()返回的是元素引用，如果你使用getElementsByTagName或者getElementsByClassName，返回的是数组。还有问题可以追问。
c3实现你这个需求很麻烦，建议你用JQ的animate:$('el').animate({top: "-=20",right:"-=30"}, 600)
移不动请检查该元素是否有position：relative。
或者自己用js封装一个动画。
