анимация ключевых кадров 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;} 
} 

И я начинаю анимацию внутри яваскрипта функции следующим образом:

<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"; 
}