如何用js使得一个已经结束的css的animation动画重新执行一遍

html-css010

如何用js使得一个已经结束的css的animation动画重新执行一遍,第1张

可以试试移除动画的类再重新给节点添加动画的类

下面这个demo是执行一次动画,2s后再重新执行一遍

(因为是demo,我就没有考虑兼容性问题,没有添加css前缀)

1

<div class="dot anm" id="anm"></div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

.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)

c3实现你这个需求很麻烦,建议你用JQ的animate:

$('el').animate({top: "-=20",right:"-=30"}, 600)

移不动请检查该元素是否有position:relative。

或者自己用js封装一个动画。