• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • animation-iteration-count

    版本:CSS3

    animation-iteration-countCSS属性定义动画在结束前运行的次数可以是1次无限循环.

    如果指定了多个值,每次播放动画时,将使用列表中的下一个值,在使用最后一个值后循环回第一个值。

    通常情况下,使用animation简写属性,来一次性设置所有动画属性会更方便。

    示例

    /* 值为关键字 */
    animation-iteration-count: infinite;
    
    /* 值为数字 */
    animation-iteration-count: 3;
    animation-iteration-count: 2.4;
    
    /* 指定多个值 */
    animation-iteration-count: 2, 0, infinite;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持animation-iteration-count/code>

    语法

    animation-iteration-count:infinite>| <number>

    取值:

    • infinite:无限循环播放动画。
    • <number>:动画播放的次数;默认值为1。可以用小数定义循环,来播放动画周期的一部分:例如,0.5将播放到动画周期的一半。不可为负值。
    默认值1
    适用于所有元素,包含伪对象::beforeand::after
    继承性
    动画性
    计算值指定值
    媒体视觉<

    实例

    <style type="text/css">
    div{
    	width:100px;
    	height:100px;
    	position:relative;
    	background-color:hsl(120,65%,75%);
    	animation:demo 5s;
    	animation-iteration-count:infinite;
    	-webkit-animation-iteration-count:infinite;/*safari和chrome*/
    }
    @keyframes demo
    {
    	from{left:0px;}
    	to{left:350px;opacity:0.5;}
    }
    /*safari和chrome*/
    @-webkit-keyframes demo
    {
    	from{left:0px;}
    	to{left:350px;opacity:0.5;}
    }
    </style>
    </head>
    <body>
    	<div></div>	
    </body>

    效果图