旧版iPad Webkit上的动画消失

Question

我的CSS3动画似乎在所有设备上都能正常工作，除了它在旧的iPad/safari上消失了，我不知道为什么：-

@-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;
}

触发

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;
    }

动画贯穿始终，然后由于某种未知原因而消失？

谢谢Glennyboy

Answer 1

事实证明css没有任何问题。

通过确保所有CSS都在一个文件中（以前是单独的）并且启用了动画的硬件加速，设法解决了这个问题。我喜欢使用以下组合：-

-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;