IOS 中的动画延迟无法正常工作

Posted 2023-03-12

【中文标题】IOS 中的动画延迟无法正常工作

【英文标题】：animation-delay in IOS not working correctly

【发布时间】：2013-04-02 19:39:56

【问题描述】：

所以我知道 JS setInterval 在 ios 和 android 中有问题。我最近发现 css 中的动画延迟也有问题。我有一个加载微调器，它有 8 个会增长/收缩的点，并且微调器会旋转。所以在开始时，顶部的点让动画增长，然后下一个点有一个延迟，然后动画也被应用。这使它看起来像是在追逐一圈红点。

这是所需外观的小提琴。 http://jsfiddle.net/3xjRF/

但是，在 iOS 和 Android 上，延迟的附加很奇怪。有时前 5 个点会同时开始动画或其他。关键是延迟要么不被尊重、四舍五入，要么在不同的时间应用。

任何想法如何让 css 动画延迟在 iOS webview 中正常工作？我尝试使用 scale3d 以便它可以在 GPU 中运行，但即便如此，延迟仍然是主要问题。我想用 css 和 gif 来做。

#circularG 
  width: 90px;
  height: 90px;
  position: relative;
  margin:0 auto;
  top: 39%;
  z-index: 10000;

.circularG 
  position: absolute;
  background-color: #d4242c;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -webkit-animation-name: bounce_circularG;
  -webkit-animation-duration: 1.28s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: linear;
  -moz-animation-name: bounce_circularG;
  -moz-animation-duration: 1.28s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: linear;
  border-radius: 14px;
  -o-animation-name: bounce_circularG;
  -o-animation-duration: 1.28s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: linear;
  -ms-animation-name: bounce_circularG;
  -ms-animation-duration: 1.28s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-direction: linear;


#circularG_1 
  left: 0;
  top: 35px;
  -webkit-animation-delay: 0.4800000000000001s;
  -moz-animation-delay: 0.4800000000000001s;
  -o-animation-delay: 0.4800000000000001s;
  -ms-animation-delay: 0.4800000000000001s;


#circularG_2 
  left: 10px;
  top: 10px;
  -webkit-animation-delay: 0.64s;
  -moz-animation-delay: 0.64s;
  -o-animation-delay: 0.64s;
  -ms-animation-delay: 0.64s;


#circularG_3 
  top: 0;
  left: 35px;
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  -ms-animation-delay: 0.8s;


#circularG_4 
  right: 10px;
  top: 10px;
  -webkit-animation-delay: 0.9600000000000002s;
  -moz-animation-delay: 0.9600000000000002s;
  -o-animation-delay: 0.9600000000000002s;
  -ms-animation-delay: 0.9600000000000002s;


#circularG_5 
  right: 0;
  top: 35px;
  -webkit-animation-delay: 1.12s;
  -moz-animation-delay: 1.12s;
  -o-animation-delay: 1.12s;
  -ms-animation-delay: 1.12s;


#circularG_6 
  right: 10px;
  bottom: 10px;
  -webkit-animation-delay: 1.28s;
  -moz-animation-delay: 1.28s;
  -o-animation-delay: 1.28s;
   -ms-animation-delay: 1.28s;


#circularG_7 
  left: 35px;
  bottom: 0;
  -webkit-animation-delay: 1.44s;
  -moz-animation-delay: 1.44s;
  -o-animation-delay: 1.44s;
  -ms-animation-delay: 1.44s;


#circularG_8 
  left: 10px;
  bottom: 10px;
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  -ms-animation-delay: 1.6s;


@-webkit-keyframes bounce_circularG 
  0% 
-webkit-transform:scale(1)
  
  100% 
    -webkit-transform:scale(.3)
  


@-moz-keyframes bounce_circularG 
  0% 
    -moz-transform:scale(1)
  
  100% 
    -moz-transform:scale(.3)
  


@-o-keyframes bounce_circularG 
  0% 
    -o-transform:scale(1)
  
  100% 
    -o-transform:scale(.3)
  


@-ms-keyframes bounce_circularG 
  0%
    -ms-transform:scale(1)
  
  100% 
    -ms-transform:scale(.3)
  

谢谢

【问题讨论】：

有点跑题了： 因为我注意到你的代码中有不寻常的时间间隔（例如0.9600000000000002s），我必须问：你的动画代码是自动化的吗？如果是，您使用的是什么软件？

【参考方案1】：

奇怪，我第一次在 Chrome 中查看它时，它们都同时跳动。但是当我重新打开窗户时，他们终于摇摇晃晃地绕了一圈。

我的想法（就是这样）可能与正在解析的 DOM 和正在解析和应用的 CSS 有关，并且会导致动画延迟。也许您可以等到 DOM 准备好，然后应用一个父类，然后在该点应用动画？这是一个奇怪的想法，我不知道它是否会起作用。

您是否在 iOS 和 Android 上对动画延迟进行过任何其他测试？ （我正在做一些小事情，没有发现任何问题，但我使用的是整数延迟值。

【讨论】：

这里也一样。第一次不工作，但当我再次打开它工作。

是的，它适用于所有浏览器，但在移动设备上却不行。我很确定这是因为该类被添加到不均匀的dom元素中，而不是一次全部添加，所以延迟关闭了。我会尝试准备好文档。我也认为这是由于移动速度的限制，所以这可能会导致 dom 加载缓慢和意外错误。

所以我准备了一个 jquery doc，它将动画类添加到 spinner elems。但即便如此，延迟在移动设备上也没有得到尊重。我必须制作 8 个动画，每个点一个，然后设置关键帧以达到类似的效果。不知道为什么动画延迟不起作用

这真的很奇怪，我会睁大眼睛看看其他人是否也有这个问题。我只是想在 Mac 上的 iOS 模拟器上对其进行测试，并且效果很好。所以我真的不知道为什么你没有看到它在野外工作。

我在 iOS 6 上遇到了同样的问题。延迟不同步。 在 DOM Ready 事件之后添加延迟属性也不起作用。不过，所有动画似乎都没有延迟。

【参考方案2】：

看起来问题与将 css 应用于 dom 的时间有关。为了解决这个问题，我没有为每个元素使用具有不同延迟的相同动画，而是为每个使用关键帧偏移的元素使用了关键帧动画。这允许 dom 应用动画而不必担心延迟。这需要更多的 css，但在 ios 中有效。这有点难看，记住你必须为所有浏览器加上前缀，所以你需要一个 -wekbit 等等。您可以看到每个点如何具有不同的偏移量，最后几个点具有起始偏移量，因此它会进行完整的旋转

@-ms-keyframes bounce_circularG1 
  0% 
    -ms-transform:scale(1)
  
  40%, 100% 
    -ms-transform:scale(.3)
  

@-ms-keyframes bounce_circularG2 
  13.5% 
    -ms-transform:scale(1)
  
  0%, 12.5%, 43.5%, 100% 
    -ms-transform:scale(.3)
  

@-ms-keyframes bounce_circularG3 
  26% 
    -ms-transform:scale(1)
  
  0%,25%, 46%, 100% 
    -ms-transform:scale(.3)
  

-ms-keyframes bounce_circularG4 
  38.5% 
    -ms-transform:scale(1)
  
  0%, 37.5%, 78.5%,100% 
    -ms-transform:scale(.3)
  

@-ms-keyframes bounce_circularG5 
  51% 
    -ms-transform:scale(1)
  
  0%, 50%, 91%,100% 
    -ms-transform:scale(.3)
  

@-ms-keyframes bounce_circularG6 
  63.5% 
    -ms-transform:scale(1)
 
  3.5%, 62.5% 
    -ms-transform:scale(.3)
  
  0%, 100% 
    -ms-transform:scale(.37)
  

@-ms-keyframes bounce_circularG7 
  76% 
    -ms-transform:scale(1)
  
  16%, 75%
    -ms-transform:scale(.3)
  
  0%, 100% 
    -ms-transform:scale(.58)
  

@-ms-keyframes bounce_circularG8 
  88.5% 
    -ms-transform:scale(1)
  
  29.5%, 87.5% 
    -ms-transform:scale(.3)
  
  0%, 100% 
    -ms-transform:scale(.80)
  

【参考方案3】：

animation-delay 在其他 iOS 性能要求方面处于次要地位。正如 Paul Irish 在 this very topic 上所说，“对于移动 safari 团队来说，滚动性能胜过规范一致性”。

如here 所建议的那样，一个受欢迎的解决方案似乎是将延迟合并到每行的单独@keyframe 规则中（以及一些替代解决方法）。