重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

因为专注,所以专业

CSS animation-iteration-count 属性,解释

有时,CSS 的行为并不像我们期望的那样。以CSS 动画为例:创建一个动画后,您可能希望动画一遍又一遍地循环播放。
然而,事实并非如此。默认情况下,动画将发生一次,然后停止。那么,如果我们希望我们的动画重复几次,或者无限重复加载动画之类的东西怎么办?为此,我们需要使用animation-iteration-count属性设置迭代次数
它可能具有 CSS 属性中较长的名称之一,但animation-iteration-count并不难理解,一旦您知道它的工作原理,您就可以创建重复动画来吸引页面查看者。让我们仔细看看。

什么是动画迭代次数?

动画迭代计数CSS属性指定了多少次的动画序列将播放。如果迭代次数有限,动画将在指定的循环次数后停止。规则写成如下:
 
 
animation-iteration-count: infinite | <number> | initial | inherit;
 

动画迭代计数值

动画迭代计数物业可以采取几个值。它的主要值是infinite<number>,并且该属性还接受全局值initialinherit。现在让我们逐一介绍。

无限的

如果分配的animation-iteration-count值为无限,动画将无限重复。这是您不想自行停止的动画的最佳值。
 
 

<编号>

对于一个数值动画迭代计数使动画重复的次数规定的数量。例如,值为3将导致动画循环 3 次。
 
如果 没有指定animation-iteration-count 的值,则该值默认为1,动画将循环一次。值为0 会阻止播放动画。
您还可以使用小数点在完成最后一个循环之前停止动画。例如,值为2.5将导致动画循环两次半。
 
 

最初的

初始值设置的值动画迭代计数到其默认,1

继承

如果指定了inheritanimation-iteration-count将从父元素继承值。

动画迭代计数的多个值

在上面的例子中,我们只为animation-iteration-count分配了一个值,但是这个属性(以及其他 CSS 动画属性)也可以处理多个值。这允许您为不同的动画分配不同的迭代计数。
要将多个值添加到animation-iteration-count,请添加以逗号分隔的值,如下所示:
 
 
animation-iteration-count: 3, 5, infinite;

animation-iteration-count(和其他 CSS 动画属性)列出多个值会根据列表的顺序将每个值分配给一个与animation-name属性一起列出的值。的第一个值动画迭代计数适用于第一个值动画名称,第二值动画迭代计数适用于第二个值动画名,依此类推。
这是对三个不同的动画属性使用多个animation-iteration-count值的示例:
 
 

动画迭代计数的 CSS 简写

您还可以使用动画 速记 CSS 属性指定动画迭代次数,以使用更少的代码行。例如,在以下代码中:
 
 
animation: example 3s 2s 5 ease;

... 值5设置动画迭代次数。
 
 

循环你的 CSS 动画

只需要额外的一行 CSS,就可以很容易地让你的动画在指定的迭代次数内无限循环。例如,您可以应用一些微妙的移动来使元素看起来在页面上“悬停”,或者对按钮单击应用有趣的摇晃效果。您可以广泛控制动画和样式,这就是 CSS 的全部内容。