Check out the code here.
In Safari on Mac or iPhone, when using scaleX with opacity in a background image, it doesn't work. To fix this issue, we can use scale or scale3d(sx,sy,sz). But why does this happen? Is it a bug specific to Safari?
@keyframes scale-not-work-in-iphone {
0% {
transform: scaleX(1);
}
99% {
opacity: 0;
transform: scale3d(2, 2, 2);
}
100% {
opacity: 0;
transform: scale3d(0, 0, 0);
}
}