CSS 动画不使用 mozAnimationName 在 Mozilla 中执行

Question

<style>

@keyframes shake {
    0% {
        -moz-transform:scale(0);opacity:0;
    }
    25% {
        -moz-transform:scale(1.3);opacity:1;
    }
    50% {
        -moz-transform:scale(0.7);opacity:1;
    }
    75% {
        -moz-transform:scale(2);opacity:1;
    }
    100% {
        -moz-transform:scale(1);opacity:1;-moz-transform:rotate(45deg);
    }
}


</style>

<div style="-moz-animation-duration:2s;" onclick='this.style.mozAnimationName="shake";'>TEST</div>

它在 Google Chrome 中使用其各自的 -webkit 前缀工作正常，但在 Firefox (-moz) 中，它无法正常工作。

是否有解决方案，或者这只是我的一个愚蠢错误？此外，我不想将 jQuery 用于我的解决方案。

Answer 1

它不起作用，因为 Firefox no longer requires the vendor prefixes in more recent versions（从 Firefox 16 开始），所以只需删除那些：

http://jsfiddle.net/nsca73oo/2/

<style>

@keyframes shake {
    0% {
        transform: scale(0);
        opacity:0;
    }
    25% {
        transform: scale(1.3);
        opacity: 1;
    }
    50% {
        transform: scale(0.7);
        opacity: 1;
    }
    75% {
        transform: scale(2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        transform: rotate(45deg);
    }
}


</style>

<div style="animation-duration: 2s;" onclick='this.style.animationName = "shake";'>TEST</div>

CSS 动画不使用 mozAnimationName 在 Mozilla 中执行

CSS animation NOT executing in Mozilla using mozAnimationName

javascript

css

css-animations