I am encountering an issue with Mac/Safari where two CSS animations are not working properly upon refreshing the screen.
- The div should perform a right scroll left animation.
- The image is not resizing as intended.
For the scrolling animation, I have implemented the following code:
.overlay {
background-color: #fff;
opacity: 0.83;
-webkit-transition: right .5s ease;
-moz-transition: right .5s ease;
-o-transition: right .5s ease;
-ms-transition: right .5s ease;
transition: right .5s ease;
position: relative;
}
And for the image resizing animation:
.resize {
animation: animationIncrease .5s infinite alternate;
-webkit-animation: animationIncreaseMac .5s infinite alternate;
-moz-animation: animationIncrease .5s infinite alternate;
-o-animation: animationIncrease .5s infinite alternate;
-ms-animation: animationIncrease .5s infinite alternate;
}
@keyframes animationIncrease {
0% {
transform: scale(1.0);
}
100% {
transform: scale(1.3);
}
}
While this setup works fine in Chrome/Firefox/IE, it seems to be malfunctioning specifically on Mac/Safari. The animations work correctly when I stop clicking. Any suggestions?