时间：2021-07-01 10:21:17 帮助过：30人阅读
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction默认值： none 0 ease 0 1 normal
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
语法
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。（值：n次，infinite无限循环）
animation-direction 规定是否应该轮流反向播放动画。
总结：
根据上述属性，只需要根据具体情况设置animation-delay和animation-iteration-count即可。
例如：
p
{
animation:mymove 5s 5s infinite;
-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */
}方案例子：
<!doctype html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.item1{
list-style: none;
-webkit-animation: revolving 4s 0s infinite;
animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
0,75%{
-webkit-transform: perspective(700px) rotateX(90deg);
}
87.5%{
-webkit-transform: perspective(700px) rotateX(0deg);
}
100%{
-webkit-transform: perspective(700px) rotateX(-90deg);
}
}
</style>
</head>
<body>
<ul>
<li class="item1">梅西与美洲杯失之交臂</li>
</ul>
</body>
</html>把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了。
【相关推荐】
1. 详细介绍CSS3中animation-direction属性
2. 必须掌握的CSS3动画（Animation）的8大属性
3. 分享一个监听css3动画（animation）结束事件实例
4. 详解css3中两种暂停方式（transition、animation）
以上就是利用animation属性实现循环间的延时执行实例教程的详细内容，更多请关注Gxl网其它相关文章！