延迟密钥帧动画的新方法

在CSS @keyframes动画中不直接支持迭代之间的暂停。当animation-delay推迟动画的开始时，在迭代之间插入延迟需要解决方法。本文探讨了有效的技术，解决了先前方法的局限性。

在适应以太空为主题的员工门户网站的过程中，出现了需求。在保持随机性的同时，需要较少的恒星来最大程度地减少干扰和CPU负载。

现有方法的局限性

传统方法涉及将密钥帧调整为100％的一部分，并保持最终状态直到100％模拟停顿。这很麻烦，容易出错，并且使理解动画的逻辑变得困难。

 @keyframes my-animation {
  / *动画（0％至50％） */
  0％{宽度：0; }
  15％{宽度：100px; }
  / *暂停（50％至100％） */
  50％，100％{宽度：0; }
}

一种新方法：有条件隐藏

高级方法使用第二个@keyframes设置来控制暂停期间的可见性。这将动画逻辑与暂停分开。

 。
  动画：my-awesome-boop 1s，暂停 - 识别4s；
}

@keyframes my-awesome-boop {
  / *您的主要动画在这里 */
}

@keyframes暂停 - 介于 - 曲线{
  / *可见（25％） */
  0％，25％{不透明度：1; }
  / *隐藏（75％） */
  25.1％，100％{不透明度：0; }
}

暂停持续时间必须是动画持续时间的倍数。无限重复重复的密钥帧将立即重新启动，覆盖更长的动画。

关键洞察力：宽松功能在定义的密钥帧之间适用，而不是0％至100％。这意味着将宽松曲线单独应用于连续键帧之间的每个属性。

在上面的示例中， my-awesome-beboop在暂停期间多次奔跑，然后才能恢复。

这是适用于流星动画的方式：

在停顿期间保持可见性

如果在停顿期间必须保持动画，则第二个@keyframes集可以抵消主动画的运动。例如，如果使用translateX ， left或margin-left动画以中和运动。

示例包括使用transform-origin或用left动画来抵消translateX暂停。暂停translateX进行多个迭代需要更复杂的密钥框架：

 / *暂停三个迭代 */
@keyframes slide-left pape {
  25％，50％，75％{左：0; }
  37.5％，62.5％，87.5％{左：-100px; }
  100％{左：0; }
}

由于动画冲突，可能会发生较小的抖动。

结论

在暂停期间隐藏元素或抵抗transform动画提供了最佳性能。操纵left ， margin或width之类的特性在计算上比调整opacity更重要。

归功于Nakaya的原始流星动画。

以上是延迟密钥帧动画的新方法的详细内容。更多信息请关注PHP中文网其他相关文章！