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

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

这是一把理想的小提琴

然而，在iOS和安卓系统上，延迟的情况很奇怪。有时，前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)
  }
}

---

谢谢

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

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

---

你在iOS和Android上做过其他关于动画延迟的测试吗？（我正在做一些小事情，没有注意到任何问题，但我使用的是整数延迟值。

看起来这些问题与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)
  }
}

---

动画延迟与其他iOS性能要求相比处于次要地位。正如Paul Irish在文章中所说，“滚动性能胜过移动safari团队的规范一致性”

---

一个受欢迎的解决方案似乎是将延迟合并到每条线的单个

@keyframe

规则中，如建议的那样（以及两个备选解决方案）.

这里也一样。第一次没用，但当我再次打开它时，它可以用了。是的，它在所有浏览器上都可以用，但在移动设备上不能用。我很确定这是因为类一次添加到dom元素，所以延迟被消除。我会尝试准备好文档。我还认为这是由于移动设备的速度限制，所以这可能会有助于但由于dom加载缓慢且出现意外错误。因此我加入了一个jquery doc ready，将动画类添加到微调器元素。但即便如此，延迟在移动设备上也没有得到考虑。我必须制作8个动画，每个点一个，然后设置关键帧以达到类似效果。不确定为什么动画延迟不起作用这真的很奇怪，我会继续关注其他人是否也有这个问题。我刚想到在Mac上的iOS模拟器上测试它，它工作得很好。所以我真的不知道为什么你看不到它在野外工作。我在iOS 6上也有同样的问题。延迟被取消同步。在DOM就绪事件之后添加延迟属性不起作用还有。虽然没有延迟，但所有动画似乎都运行正常。有点离题：因为我注意到您的代码中存在异常的时间间隔（例如

0.9600000002s

），我必须问：您的动画代码是自动的吗？如果是，您使用了什么软件？