如何在 CSS 中动画的不同关键帧上开始不同的元素

Posted 2023-03-06

【中文标题】如何在 CSS 中动画的不同关键帧上开始不同的元素

【英文标题】：How to start different elements on different keyframes of an animation in CSS

【发布时间】：2013-02-03 23:10:21

【问题描述】：

如果我有一个 CSS 动画，我想创建该动画的各种实例，但从动画的不同阶段开始，我该如何指定。

我想象过这样的事情，第二行 webkit 是伪代码：

 #cell1
  
      width:100px;
      height:100px;

       -webkit-animation: pulse 35s infinite alternate;
       -webkit-animation: pulse start at 25%;
  

【问题讨论】：

这里有一个很好的教程css-tricks

有趣的问题。我曾经需要归档一个类似的结果，但最终对元素的初始状态进行了“硬编码”。想知道是否有人可以对此有所了解。

路人，你能举个例子说明你是如何硬编码初始状态的吗？

【参考方案1】：

据我了解，animation-delay 的负值可以解决问题：

http://www.w3.org/TR/css3-animations/#animation-delay

如果“animation-delay”的值为负时间偏移，则动画将在应用它的那一刻执行，但似乎已在指定的偏移处开始执行。也就是说，动画将在其播放周期的中途开始。如果动画具有隐含的起始值和负的“动画延迟”，则起始值从应用动画的那一刻起获取。

编辑：确实，这适用于我的铬：http://jsfiddle.net/GvUzX/

【讨论】：

这个。特征。是。惊人的。非常感谢，这让我的项目变得更加容易