在循环中的纯CSS3中依次对元素进行动画处理 [英] animating elements sequentially in pure css3 on loop

问题描述

我正在尝试在完整的CSS3动画中依次对元素进行动画处理。似乎最直接的答案是使用动画延迟。但是我想要这个循环，关于如何使动画无限循环的任何想法？

I'm trying to animate in elements sequentially in full css3 animations. Seems the very straight forward answer is using animation delay. However I wanted this in loop, any ideas how to make the animation loop infinitely?

我发现了这个小提琴在一个类似的问题上。基本上这是相同的逻辑，但我只希望它循环播放。

I found this fiddle on a similar question. Basically that's the same logic but I just wanted it looped.

这是类似的[问题]（ https://stackoverflow.com/a/8294491/340888 ）

This was the similar [question] (https://stackoverflow.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个元素设置动画。因此，他们将一个接一个地进行动画处理。

Edit

Just to be clear, I want the animation in a sequential manner, say after the first one animates, it animates the 2nd item, then 3rd.. and so on. I'm thinking about animating around 10 to 12 elements. So they'll animate one after another.

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

So @Sonu Joshi's answer is incorrect.

推荐答案

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

You need to make the animation long enough so that all the elements have a chance to animate before the cycle starts again.

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

In this example, your 4th element only starts animating after 2 seconds. The transition itself is going to take another second, and then you might want a bit of a pause, say another second, before you reanimate the first element. So that's 4 seconds in total.

所以您可能想要这样的东西： -webkit-animation：Fadein 4s无限线性。

So you might want something like this: -webkit-animation: Fadein 4s infinite linear.

但是您还需要调整关键帧百分比，将每个关键帧百分比除以4，因为您仍然希望转换本身仅花费1秒钟。

But you'll also need to adjust the keyframe percentages, dividing each of them by 4, since you still want the transition itself to take only 1 second.

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

小提琴示例

这篇关于在循环中的纯CSS3中依次对元素进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！