如何用js使得一个已经结束的css的animation动画重新执行一遍
2个回答
展开全部
可以试试移除动画的类再重新给节点添加动画的类
下面这个demo是执行一次动画，2s后再重新执行一遍
（因为是demo，我就没有考虑兼容性问题，没有添加css前缀）
<div class="dot anm" id="anm"></div>
.dot {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border-radius: 50%;
background: #000;
}
.anm {
animation: move 1s forwards;
}
@keyframes move
{
from {
left:0px;
}
to {
left:200px;
}
}setTimeout(function() {
var dom = document.getElementById('anm');
dom.className = 'dot';
setTimeout(function() {
dom.className = 'dot anm';
}, 10);
}, 2000);
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box { width: 400px; height: 400px; background-color: red; }
.animation {
animation: rotate 2s both linear;
}
@keyframes rotate {
form {
transform: rotate(0deg)
}
to { transform: rotate(360deg) }
}
</style>
</head>
<body>
<div class="box">
box
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var box = document.querySelector('.box');
box.classList.add('animation');
box.addEventListener('animationend', function(e) {
var self = this
self.classList.remove('animation')
setTimeout(function() {
self.classList.add('animation')
}, 1)
})
})
</script>
</body>
</html>
动画播放结束的事件是animationend
如果你只是要无限循环的话，不用javascript，css animation这样写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box { width: 400px; height: 400px; background-color: red; }
.animation {
animation: rotate 2s both linear infinite;
}
@keyframes rotate {
form {
transform: rotate(0deg)
}
to { transform: rotate(360deg) }
}
</style>
</head>
<body>
<div class="box animation">
box
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
