iPad Safari CSS3 动画计时错误答案

【问题标题】：IPad Safari CSS3 animation timing bugiPad Safari CSS3 动画计时错误
【发布时间】：2014-11-23 02:14:28
【问题描述】：

在 Ipad Safari 上（可能在 Mac Safari 上，但我没有要测试的 MAC）... 当我第一次加载页面时，或者在我点击刷新后，CSS3 动画时间会完全古怪。它每次都是随机关闭的，但总是有一个滑稽的边缘，这会使动画表现得出乎意料。

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

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

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

【问题讨论】：

还没弄明白。但是您可以使用此链接进行测试...www.timothytown.com/tims_portoflio/examples5.php

标签： css safari mobile-safari css-animations

【解决方案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
   } 
}

【讨论】：