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

将无法在初始加载时正确计时（尽管保留该网页视图并返回将更正问题 - 仍然不知道为什么会出现这种情况）。

修复方法是为需要同步的所有动画添加延迟，并确保所有延迟都是正面或负面。以上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
   } 
}

IPad Safari CSS3动画计时错误

1 个答案: