CSS动画迭代计数属性，解释

有时，CSS并不是我们预期的方式行事。拿CSS动画例如：创建一个后，您可能希望您的动画循环一遍又一遍。

但是，这不是发生的事情。默认情况下，动画将发生一次，然后停止。所以，如果我们希望我们的动画重复几次，或无限地为类似的东西加载动画？为此，我们需要使用次数迭代动画迭代计数财产。

它可能有CSS属性中的较长名称之一，但动画迭代计数不太难理解，一旦你知道它是如何工作的，你可以创建重复动画来参与页面观众。让我们仔细看看。

什么是动画 - 迭代计数？

这动画迭代计数CSS属性指定动画序列将播放的次数。如果迭代计数是有限的，则动画将在指定的周期后停止。该规则写得如下：

动画 - 迭代计数：无限| |初义|继承;

动画 - 迭代计数值

这动画迭代计数属性可以采取几个值。它的主要价值是无限的和，该物业也接受全局价值观最初的和继承。让我们现在经历一下。

无限的

如果分配A.动画迭代计数的价值无限的，动画将无限重复。这是您不想自己停止停止的动画的最佳价值。

看笔动画 - 迭代计数：无限由克里斯蒂娜百科（@hubspot.） 在Codepen.。

数值动画迭代计数导致动画重复所述次数。例如，值3.将导致动画循环三次。

看笔动画迭代计数：数字由克里斯蒂娜百科（@hubspot.） 在Codepen.。

如果是值动画迭代计数未指定，此值默认为1，动画将循环一次。价值0.防止动画播放。

在完成最终周期之前，您还可以使用十进制来停止动画。例如，值2.5将导致动画循环两次半。

看笔动画 - 迭代计数：十进制由克里斯蒂娜百科（@hubspot.） 在Codepen.。

最初的

这最初的值设置值动画迭代计数到它的默认值，1。

继承

如果继承指定了，动画迭代计数将从父元素继承该值。

动画迭代计数的多个值

在上面的示例中，我们只为一个值分配给动画迭代计数，但此属性（以及其他CSS动画属性）也可以处理多个值。这允许您为不同的动画分配不同的迭代计数。

添加多个值动画迭代计数，添加用逗号分隔的值，如下所示：

动画迭代 - 计数：3,5，无限;

列出多个值动画迭代计数（以及其他CSS动画属性）将每个值分配给列出的值动画名称属性根据列表的顺序。第一个值动画迭代计数适用于第一个值动画名称，第二个价值动画迭代计数适用于第二个价值动画名称， 等等。

这是一个使用多个的例子动画迭代计数三个价值不同的动画属性：

看笔动画 - 迭代计数：多个值由克里斯蒂娜百科（@hubspot.） 在Codepen.。

动画迭代计数的CSS速记

您还可以使用该方法指定动画迭代的数量动画片速记CSS属性使用更少的代码行。例如，在以下代码中：

动画：例3s 2s 5缓解;

… 价值5.设置动画迭代的数量。

看笔动画 - 迭代计数：速记由克里斯蒂娜百科（@hubspot.） 在Codepen.。

循环CSS动画

只需额外的CSS行，它很容易为您的动画循环提供指定数量的迭代。例如，您可以应用一些微妙的运动来使元素在页面上显示“悬停”，或者对按钮单击应用乐趣摇动效果。您对动画和造型进行了广泛的控制，这是CSS所有的内容。