Rumah >hujung hadapan web >tutorial css >animation-iteration-count属性怎么用
animation-iteration-count属性怎么用
- 青灯夜游asal
- 2019-01-31 11:25:164572semak imbas
animation-iteration-count属性是用于定义动画播放次数的，设置animation-iteration-count属性的值为infinite，就可实现动画的无限循环播放。
CSS3 animation-iteration-count属性
作用：animation-iteration-count 属性定义动画的播放次数。
语法：
animation-iteration-count: n|infinite;
n：定义动画播放次数的数值。
infinite：规定动画应该无限次播放。
注：Internet Explorer 9 以及更早的版本不支持 animation-iteration-count 属性。
CSS3 animation-iteration-count属性的使用示例
设置动画循环3次
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:3;
/* Safari and Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:3;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图：
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！
Atas ialah kandungan terperinci animation-iteration-count属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：animation-delay属性怎么用Artikel seterusnya：animation-direction属性怎么用