As I work on my website, I have integrated a CSS keyframes animation that is triggered by clicking a link connected to a JavaScript function.
Here is an excerpt from my CSS file:
#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;}
}
To start the animation within a JavaScript function, I've used the following code snippet:
<script>
function animate()
{
document.getElementById('banner').style.webkitAnimationPlayState = "running";
}
</script>
Surprisingly, the animation works flawlessly in some browsers but fails to operate in others. I wonder why this disparity exists?
Interestingly, the jQuery animation I implement subsequently always functions correctly. It is called using this syntax:
$("#someid").fadeOut();