We have a project in the works that involves CSS animation. Our goal is to update the animation duration using JavaScript. Although this change is effective in most browsers, it seems to have trouble with Safari and iOS.
Below is the code we are using to adjust the animation duration:
document.getElementById("circle").style.animationDuration = data.pulse+"ms"
document.getElementById("circle").style.webkitAnimationDuration = data.pulse+"ms"
Here is the related CSS code:
@keyframes pulse {
0% {transform: scale(0); opacity: 0;}
30% {opacity: 1;}
100% {opacity: 0; transform: scale(0.8);}
}
@-webkit-keyframes pulse {
0% {-webkit-transform: scale(0); opacity: 0;}
30% {opacity: 1;}
100% {opacity: 0; -webkit-transform: scale(0.8);}
}
@-moz-keyframes pulse {
0% {-moz-transform: scale(0); opacity: 0;}
30% {opacity: 1;}
100% {opacity: 0; -moz-transform: scale(0.8);}
}
In Safari, the animation only runs once and then the object remains static in its original size.
We have experimented with various ways to define the webkitAnimationDuration;, such as ["-webkit-animation-duration"]
Any assistance or suggestions would be greatly valued!