1

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

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

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

任何想法如何让 css 动画延迟在 iOS webview 中正常工作？我尝试使用 scale3d 以便它可以在 GPU 中运行，但即便如此，延迟仍然是主要问题。我想用 css vs 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)
  }
}

谢谢

4

3 回答 3

1

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

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

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

于 2013-04-02T20:04:38.363 回答
1

看起来问题与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)
  }
}
于 2013-07-15T18:45:58.687 回答
0

动画延迟在其他 iOS 性能要求方面处于次要地位。正如 Paul Irish 在这个话题上所说，“对于移动 safari 团队来说，滚动性能胜过规范一致性”。

一个受欢迎的解决方案似乎是将延迟合并到@keyframe每条线路的单独规则中，如此处所建议的（以及几个替代解决方法）。

于 2015-09-22T23:42:34.767 回答