下面是代码 -
.startanimation {
height: 100px;
width: 100px;
background: yellow;
-webkit-animation: animate 1s infinite;
}
@-webkit-keyframes animate {
100% {
width: 300px;
height: 300px;
}
}
在 HTML 中,当一个元素被赋予一个类"startanimation"时,动画就可以工作了。但是,当使用"addClass"方法将同一类添加到另一个元素时,该枚举不起作用。有什么想法吗?
演示 - http://jsfiddle.net/d3md7597/1/
$('#start').on('click', function() {
$('#x').addClass('startanimation')
})
$('#stop').on('click', function() {
$('#x').removeClass('startanimation')
})
#x {
background: pink;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
left: 300px;
top: 200px;
}
.startanimation {
height: 100px;
width: 100px;
background: yellow;
-webkit-animation: animate 1s infinite;
}
@-webkit-keyframes animate {
100% {
width: 300px;
height: 300px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="start">Start</button>
<button id="stop">Stop</button>
<br>
<br>
<div id="x"></div>