animation-iteration-count(animation-iteration-count属性的使用方法)

发布时间:2025-12-11 02:23:56 浏览次数:1

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> p{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><p></p></body></html>

效果图:

感谢你能够认真阅读完这篇文章,希望小编分享animation-iteration-count属性的使用方法内容对大家有帮助,同时也希望大家多多支持本站,关注本站行业资讯频道,遇到问题就找本站,详细的解决方法等着你来学习!

animation-iteration-count
需要做网站?需要网络推广?欢迎咨询客户经理 13272073477