动画在旧 iPad Webkit 上消失答案

【问题标题】：Animation disappearing on Old iPad Webkit动画在旧 iPad Webkit 上消失
【发布时间】：2014-09-12 03:50:21
【问题描述】：

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

动画跑完然后不知什么原因消失了？

谢谢格伦尼男孩

【问题讨论】：

您的浏览器版本号是多少？

标签： css animation css-animations

【解决方案1】：

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

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

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

【讨论】：