CSS 关键帧动画无法在某些浏览器中运行

Question

我正在建立一个网站，并添加了一个 CSS 关键帧动画，通过链接点击调用（连接到一个 javascript 函数）。

这是我的 CSS 文件：

#banner {
background-color: #00BBD2;
position: absolute;
width: 100%;
height: 100%;
animation-duration: 1s;
animation-name: resizeBanner;
animation-fill-mode: forwards;
animation-play-state: paused;
}

@keyframes resizeBanner {
from {height: 100%; background-color: #00BBD2}
to {height: 30%; background-color: #009688;}
}

我正在像这样的 javascript 函数中启动动画：

<script>
    function animate()
    {
        document.getElementById('banner').style.webkitAnimationPlayState = "running";
    }
</script>

动画在某些浏览器中运行完美，而在其他浏览器中 - 它根本不运行。 怎么会这样？

但是，我在关键帧动画之后运行的 Jquery 动画始终运行。像这样调用：

$("#someid").fadeOut();

Answer 1

检查一下：

function animate() {
    // Code for Chrome, Safari, and Opera
    document.getElementById("banner").style.WebkitAnimationPlayState = "running";

    // Standard syntax
    document.getElementById("banner").style.animationPlayState = "running";
}