如何用js使得一个已经结束的css的animation动画重新执行一遍
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用js使得一个已经结束的css的animation动画重新执行一遍相关的知识，希望对你有一定的参考价值。
好像要关掉动画然后再重新开启动画可以重新执行，那怎么样才算是开启和关闭动画呢
可以试试移除动画的类再重新给节点添加动画的类
下面这个demo是执行一次动画，2s后再重新执行一遍
（因为是demo，我就没有考虑兼容性问题，没有添加css前缀）
<div class="dot anm" id="anm"></div>.dotposition: 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); 参考技术A <!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>
以上是关于如何用js使得一个已经结束的css的animation动画重新执行一遍的主要内容，如果未能解决你的问题，请参考以下文章
如何用 js 实现 css 透明渐变效果 如:百度首页随心听的歌词效果