CSS - animation-iteration-count 属性

CSS animation-iteration-count 属性指定动画在停止之前应运行多少个周期。

animation-iteration-count 属性接受用逗号分隔的多个值。

语法


animation-iteration-count : number|infinte|initial|inherit;

属性值

值	描述
number	这指定了动画必须运行的次数。默认值为 1。
infinite	此设置指定动画必须永远持续。
initial	此属性为其初始值。
inherit	这将继承父元素的属性。

CSS animation-iteration-count 属性示例

下面列出的示例将说明具有不同值的 animation-iteration-count 属性。

带数字的迭代计数

当将数字分配给 animation-iteration-count 属性时，相应的动画将播放多次。在以下示例中，动画将播放 3 次，因为为属性指定的值为 3。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 		
	 	 	 	 .box {
	 	 	 	 	 	 width: 150px;
	 	 	 	 	 	 height: 150px;
	 	 	 	 	 	 font-size: 20px;
	 	 	 	 	 	 background-color: #3498db;
	 	 	 	 	 	 animation-name: slide;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-iteration-count: 3;
	 	 	 	 }

	 	 	 	 @keyframes slide {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 transform: translateY(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: translateY(100px);
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: translateY(0);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Iteration Count Property</h2>
	 	 <div class="box">Animation Iteration Count</div>
</body>

</html>

无限的迭代计数

当 animation-iteration-count 的值设置为无限时，动画将永远播放。在以下示例中，动画会继续播放，而不会出现任何中断。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 		
	 	 	 	 .box {
	 	 	 	 	 	 width: 150px;
	 	 	 	 	 	 height: 150px;
	 	 	 	 	 	 font-size: 20px;
	 	 	 	 	 	 background-color: #3498db;
	 	 	 	 	 	 animation-name: slide;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 }

	 	 	 	 @keyframes slide {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 transform: translateY(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: translateY(100px);
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: translateY(0);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Iteration Count Property</h2>
	 	 <div class="box">Animation Iteration Count</div>
</body>

</html>

具有初始值的迭代计数

当 animation-iteration-count 的值设置为 initial，初始值（即 1）将设置为属性，因此动画仅播放一次。在以下示例中，动画仅播放一次。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 		
	 	 	 	 .box {
	 	 	 	 	 	 width: 150px;
	 	 	 	 	 	 height: 150px;
	 	 	 	 	 	 font-size: 20px;
	 	 	 	 	 	 background-color: #3498db;
	 	 	 	 	 	 animation-name: slide;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 	 	 animation-iteration-count: initial;
	 	 	 	 }

	 	 	 	 @keyframes slide {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 transform: translateY(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: translateY(100px);
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: translateY(0);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Iteration Count Property</h2>
	 	 <div class="box">Animation Iteration Count</div>
</body>

</html>

支持的浏览器

属性
animation-iteration-count	43.0	10.0	16.0	9.0	30.0

打印本页