引入jquery
然后给你要设置动画的对象增加或者删除css3动画的类就可以了。
如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body{
padding: 20px
background-color:#FFF
}
.colorchange
{
animation:myfirst 5s
-moz-animation:myfirst 5s /* Firefox */
-webkit-animation:myfirst 5s /* Safari and Chrome */
-o-animation:myfirst 5s /* Opera */
}
@keyframes myfirst
{
from {background:red}
to {background:yellow}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red}
to {background:yellow}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red}
to {background:yellow}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red}
to {background:yellow}
}
#main{
width:100px
height:100px
background:red
}
#cgbt{
width: 100px
margin: 20px 0 0 0
text-align: center
cursor: pointer
}
#cgbt:hover{
background-color: #2D93CA
}
</style>
</head>
<body>
<div id="main">
我会变么？
</div>
<div id="cgbt">
点我让上面的变颜色
</div>
<script src="jquery-3.2.1.min.js" type="application/javascript"></script>
<script>
$(document).ready(function(){
$("#cgbt").click(function(){
$("#main").attr("class","colorchange")
})
})
</script>
</body>
</html>
当我们给元素添加Animation后，动画总是现在元素的初始位置显示一下，然后再跳到动画的起始位置播放，这样的话会很难看。
解决方法：
使用animation-fill-mode:forwards属性
forwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的最后一帧定义的位置
backwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的第一帧定义的位置
上边样式的将变现为，class为phone的元素会在加载完成后，从它的定义位置靠下5rem开始动画。
js中赋值nimation-fill-mode:forwards的方法：
object .style.animationFillMode=none | forwards | backwards | both
通过按钮的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)
}
}
