Question

所以我知道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)
  }
}

由于

Answer 1

很奇怪，我第一次在Chrome中看到它们时，它们同时发出了脉冲。但是当我重新打开窗户时，他们终于交错了一圈。

我的想法（那就是那里）可能是它与被解析的DOM和被解析和应用的CSS有关，并且与动画延迟混淆。也许你可以等到DOM准备就绪，然后应用一个父类，然后在那时应用动画？这是一个奇怪的想法，我不知道它是否会奏效。

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

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

Answer 3

动画延迟是其他iOS性能要求的后座。正如保罗·爱尔兰在this very topic上所说的那样，“滚动性能优于移动游猎团队的规范”。

一个受欢迎的解决方案似乎是将延迟纳入每条线的单个@keyframe规则，如建议here（以及一些备用解决方法）。

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

3 个答案: