CSS animation-iteration-count属性，解释

有时，CSS的行为并不像我们所期望的那样。取CSS动画在创建一个之后，你可能想让你的动画一遍又一遍地循环。

然而，事实并非如此。默认情况下，动画只会出现一次，然后停止。那么，如果我们想让我们的动画重复几次，或者对a这样的东西无限重复加载动画？要做到这一点，我们需要设置若干次迭代animation-iteration-count财产。

它可能是CSS属性中较长的名称之一，但是animation-iteration-count不难理解，一旦你知道它是如何工作的，你就可以创建重复的动画来吸引页面浏览者。让我们来仔细看看。

animation-iteration-count是什么?

的animation-iteration-countCSS属性指定动画序列将播放多少次。如果迭代计数是有限的，动画将在指定的循环数之后停止。规则写如下:

Animation-iteration-count: infinite |  |初始|继承;

animation-iteration-count值

的animation-iteration-count属性可以接受多个值。它的主要价值是无限和<数>，并且该属性也接受全局值最初的和继承．现在让我们逐一看看。

无限

如果指定一个animation-iteration-count的价值无限，动画将无限重复。这是一个动画的最佳值，你不希望它自己停止。

看到这支笔animation-iteration-count:无限Christina Perricone (@hubspot)CodePen．

<数>

的数值animation-iteration-count使动画重复指定的次数。例如，值3.将导致动画循环三次。

看到这支笔animation-iteration-count:数量Christina Perricone (@hubspot)CodePen．

如果一个值animation-iteration-count未指定，此值默认为1，动画将循环一次。的值0阻止动画播放。

您也可以使用一个小数来停止动画完成它的最后一个循环。例如，值2．5将导致动画循环两次半。

看到这支笔animation-iteration-count:小数Christina Perricone (@hubspot)CodePen．

最初的

的最初的Value设置的值animation-iteration-count其违约,1．

继承

如果继承是指定的,animation-iteration-count将从父元素继承该值。

动画迭代计数的多个值

在上面的例子中，我们只赋了一个值给animation-iteration-count，但是这个属性(以及其他CSS动画属性)也可以处理多个值。这允许你为不同的动画分配不同的迭代计数。

添加多个值animation-iteration-count，用逗号分隔的值，如下所示:

Animation-iteration-count: 3,5, infinite;

列出多个值animation-iteration-count(和其他CSS动画属性)将每个值赋给列表中的值animation-name属性基于列表的顺序。的第一个值animation-iteration-count的第一个值animation-name的第二个值animation-iteration-count的第二个值animation-name，等等。

下面是使用倍数的一个例子animation-iteration-count三个值不同的动画属性：

看到这支笔animation-iteration-count:多个值Christina Perricone (@hubspot)CodePen．

CSS动画迭代计数的缩写

控件还可以指定动画迭代次数动画速记CSS属性使用更少的代码行。例如下面的代码:

动画:示例3s 2s 5轻松;

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

看到这支笔animation-iteration-count:速记Christina Perricone (@hubspot)CodePen．

循环你的CSS动画

只需额外添加一行CSS，就可以轻松地使动画无限循环，进行指定次数的迭代。例如，您可以应用一些细微的移动来使元素看起来在页面上“盘旋”，或者应用一个有趣的摇动效果来点击按钮。您可以广泛地控制您的动画和样式，这就是CSS的全部。