animation-iteration-count属性(CSS设置播放动画次数)
animation-iteration-count属性
animation-iteration-count属性主要用来定义动画的播放次数。
语法规则：
animation-iteration-count:infinite|[,infinite|]*
1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite，动画将会无限次的播放。
举例：
通过animation-iteration-count属性让动画move只播放5次，代码设置为：
animation-iteration-count:5;
注意：Chrome或Safari浏览器，需要加入-webkit-前缀！
CSS设置播放动画次数
一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframesgogogo{
0%{
-webkit-transform:rotate(0deg);
border:5pxsolidred;
}
50%{
-webkit-transform:rotate(180deg);
background:black;
border:5pxsolidyellow;
}
100%{
-webkit-transform:rotate(360deg);
background:white;
border:5pxsolidred;
}
}
.loading{
border:5pxsolidblack;
border-radius:40px;
width:28px;
height:188px;
-webkit-animation:gogogo2sinfinitelinear;
margin:100px;
}
扩展材料
实现动画无限循环所需求的CSS属性阐明：
1、infinite
在animation后面加上infinite就能够无限循环，另外还能够做反向循环使用animation-direction
2、animation-name
规则需求绑定到选择器的keyframe名称。
3、animation-duration
规则完成动画所花费的时刻，以秒或毫秒计。
4、animation-timing-function
规则动画的速度曲线。
5、animation-delay
规则在动画开端之前的推迟。
6、animation-iteration-count
规则动画应该播放的次数。
7、animation-direction
规则是否应该轮流反向播放动画。
作品标签： CSS
优秀作品：
最新作品：
评论列表（共42人参与）参与讨论或分享设计作品获得视觉癖积分奖励
萌妹，求御注册会员
2021-06-02 15:27:30
框盒，即边框以内的区域。 ●padding-box：背景被裁剪到内边距框，即padding以内区域。 ●cont不论你是处理文字、图画、仍是图形元素，如果没有一个深思熟虑的排版构成，你的工作基本上就会崩溃。
回复
e 明黄绿色游客
2021-06-02 14:56:57
游客37217：animation-itera> NuanceCoral光韵珊瑚红 CoralReefs珊瑚礁 FusionCoral珊瑚粉，珊瑚色，橙色调的珊瑚粉 /div> 别的一个常见的错误是标题周围不正确的margin值。标题其实是与它下面的阶段是相关联的，而不仅仅是两个阶段的切割符。这就是为什
回复
othe注册会员
2021-06-02 5:13:57
结束只播放一次。 2、如果取值为infinite，动画将会无限次的小四号黑体(不加粗)，靠左对齐，首行缩进2个字符;二级标题前空一行，二级标题后不空行;三级标题前后均不空行。一切正文均选用小四号宋体，靠左对齐，首行缩进2个字符
回复