如何通过JavaScript重新触发一个WebKit的CSS动画？

6 浏览
0 Comments

如何通过JavaScript重新触发一个WebKit的CSS动画？

所以，我有这个-webkit-animation规则：

@-webkit-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}

还有一些CSS定义在我的box上的一些动画规则：

#box{
    -webkit-animation-duration: .02s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-timing-function: linear;
}

我可以这样shake我的#box：

document.getElementById("box").style.webkitAnimationName = "shake";

但是之后我无法再次抖动它。

这只会使盒子抖动一次：

someElem.onclick = function(){
    document.getElementById("box").style.webkitAnimationName = "shake";
}

如何通过JavaScript重新触发CSS动画而不使用超时或多个动画？

0