My CSS3 animation is working perfectly on most devices, but it mysteriously disappears on older iPads and in Safari. I'm not sure why this is happening:-
@-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
Triggered by
a {
-webkit-animation: rollIn 1s linear 0s 1 forwards;
-moz-animation: rollIn 1s linear 0s 1 forwards;
-o-animation: rollIn 1s linear 0s 1 forwards;
animation: rollIn 1s linear 0s 1 forwards;
}
The animation plays through but then suddenly vanishes without any apparent cause?
Appreciate your help, Glennyboy