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

这篇文章主要介绍了animation-iteration-count属性的使用方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

我们提供的服务有：成都网站建设、做网站、微信公众号开发、网站优化、网站认证、石鼓ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的石鼓网站制作公司

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>

效果图：

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

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

分享标题：animation-iteration-count属性的使用方法
文章路径：https://www.cdcxhl.com/article22/igsccc.html

成都网站建设公司_创新互联，为您提供企业建站、用户体验、网站改版、Google、电子商务、品牌网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容