可多次点击播放,采用了添加类名的方法实现动画,无法重复播放,用每次播放完动画之后清除动画的类名来解决
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js+css实现点击播放动画</title>
<style type="text/css">
.container>.animate{
background-color: #ff0000;
width: 200px;
height: 200px;
}
.aini{
animation: myfirst 2s;
}
@keyframes myfirst{
from{background: green;}
to{background: blue;}
}
</style>
</head>
<body>
<div class="container">
<div class="animate">
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$('.animate').click(function() {
$(this).addClass('aini');
setTimeout(function(){
$('.animate').removeClass('aini');
},2000)
})
</script>
</body>
</html>