微信小程序动画课程-通过wxss(css)来实现-animation-iteration-count属性

animation-iteration-count属性

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

定义和用法
animation-iteration-count 属性定义动画的播放次数。默认是 1
默认值： 1
继承性： no
版本： CSS3
JavaScript 语法： object.style.animationIterationCount=3
语法

animation-iteration-count: n|infinite;

值 描述
n 定义动画播放次数的数值。
infinite 规定动画应该无限次播放。

小程序应用

Wxml代码

animation-delay	规定动画何时开始。默认是 0。
01

Wxss代码

.c01{
width:100px;
height:100px;
background:red;
position:relative;
/*animation:mymove 5s infinite;  infinite	规定动画应该无限次播放。 */
animation:mymove 3s;
animation-iteration-count:1;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

.c02{
width: 100px; height: 100px;
position:relative;
animation:mymove2 5s infinite;
animation-iteration-count:2;
}
@keyframes mymove2
{
from {left:0px;}
to {left:200px;}
}

效果图

欢迎大家收看我的视频课程：微信小程序动画课程-通过wxss(css)来实现