css - iPad Safari CSS3 动画计时错误

Question

在 Ipad Safari 上(可以在 Mac Safari 上，但我没有要测试的 MAC)...当我第一次加载页面时，或者在我点击刷新后，CSS3 动画时间将完全古怪。它每次都是随机关闭的，但总是有一个搞笑的余量，使动画表现出意外。

这是奇怪的部分......

如果我返回主屏幕并重新打开 Safari，或者如果我切换到另一个选项卡并再次返回。动画时间是完全固定的。所以我知道这不是代码本身的问题。我试过等到页面加载后才开始播放动画，并强制重绘屏幕，但没有任何改变所描述的行为。

这类问题似乎没有多少人回答，但如果有人愿意提供帮助，我可以提供一个链接。

Answer 1

回答:

想通了。从 IOS 8.1 Safari 开始，如果混合使用正负 -webkit-animation-delay 属性，则最初加载 CSS3 动画的方式会存在错误。

例如

#no-delay{
   -webkit-animation:myAnim 2s infinite;

}
#one-second-delay{
 -webkit-animation:myAnim 2s infinite;
 -webkit-animation-delay:-1s;
}
@-webkit-keyframes myAnim{
  0%{
     //some property 
  }
 100%{
       //some property
   } 
}

在初始加载时不会正确计时(尽管离开该网页 View 并返回将纠正问题 - 仍然不知道为什么会这样)。

解决方法是为所有需要同步的动画添加延迟，并确保所有延迟都是正或负。上述 css 的修复将是...

#no-delay{
   -webkit-animation:myAnim 2s infinite;
   -webkit-animation-delay:-1s;//this also needs a negative delay to synch on IOS :(
}
#one-second-delay{
 -webkit-animation:myAnim 2s infinite;
 -webkit-animation-delay:-2s;
}
@-webkit-keyframes myAnim{
  0%{
     //some property 
  }
 100%{
       //some property
   } 
}