在纯 css3 on loop 中按顺序动画元素

Posted 2023-03-06

【中文标题】在纯 css3 on loop 中按顺序动画元素

【英文标题】：animating elements sequentially in pure css3 on loop

【发布时间】：2013-04-20 07:52:19

【问题描述】：

我正在尝试在完整的 css3 动画中按顺序对元素进行动画处理。似乎非常直接的答案是使用动画延迟。但是我想要这个循环，任何想法如何使动画无限循环？

我在一个类似的问题上找到了这个fiddle。基本上这是相同的逻辑，但我只是希望它循环。

这是类似的 [问题] (https://***.com/a/8294491/340888)

正在使用这个：

@-webkit-keyframes FadeIn  
0%  opacity:0; -webkit-transform:scale(.1);
85% opacity:1; -webkit-transform:scale(1.05);
100% -webkit-transform:scale(1); 


.myClass img  float: left; margin: 20px; 
    -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; 
.myClass img:nth-child(1) -webkit-animation-delay: .5s 
.myClass img:nth-child(2) -webkit-animation-delay: 1s 
.myClass img:nth-child(3) -webkit-animation-delay: 1.5s 
.myClass img:nth-child(4) -webkit-animation-delay: 2s 

编辑

为了清楚起见，我希望以顺序方式制作动画，比如在第一个动画之后，它动画第二个项目，然后是第三个......等等。我正在考虑制作大约 10 到 12 个元素的动画。所以他们会一个接一个地制作动画。

所以@Sonu Joshi 的回答不正确。

【问题讨论】：

有没有接受者？ :D @sonu-joshi 的答案不正确

【参考方案1】：

您需要使动画足够长，以便所有元素都有机会在循环再次开始之前进行动画处理。

在此示例中，您的第 4 个元素仅在 2 秒后开始动画。过渡本身将需要一秒钟，然后您可能需要稍作停顿，比如说再一秒钟，然后再重新激活第一个元素。所以总共是 4 秒。

所以你可能想要这样的东西：-webkit-animation: Fadein 4s infinite linear。

但您还需要调整关键帧的百分比，将它们除以 4，因为您仍然希望过渡本身只需 1 秒。

@-webkit-keyframes FadeIn  
  0%  opacity:0; -webkit-transform:scale(.1);
  21.25% opacity:1; -webkit-transform:scale(1.05);
  25% -webkit-transform:scale(1); 

Fiddle example

【讨论】：

这确实有效，你能解释一下它背后的数学原理吗，如果转换本身是 1 秒，为什么延迟是 0.5 秒间隔？

这些时间取决于您使用的数字。第二个块在第一个块之后 0.5 秒开始动画（仍然忙于动画）。第三个块在 0.5 秒后开始动画 - 在第一个块之后 1 秒 - 所以就在它完成时。

我试过这个方法，但动画只执行一次。请帮助我***.com/questions/51854155/…