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

àì夳堔傛蜴生んèń 2024-02-19 16:12 39阅读 0赞

### animation-iteration-count属性 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][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代码

<view>animation-delay	规定动画何时开始。默认是 0。</view>
    <view class='c01'>01</view>
    
    <image src='/images/logo.png' class='c02'></image>

> 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)来实现-animation-iteration-count属性][-_wxss_css_-animation-iteration-count]

[欢迎大家收看我的视频课程：微信小程序动画课程-通过wxss(css)来实现][-_wxss_css]  
![微信小程序动画课程-通过wxss(css)来实现-animation-iteration-count属性][-_wxss_css_-animation-iteration-count 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-animation-iteration-count]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/77d33363b5d646c896fbda127ad4bf0b.png
[-_wxss_css]: https://ke.qq.com/course/370983?tuin=2b10d56
[-_wxss_css_-animation-iteration-count 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1d5578a9db314031b6b668fbdf77353a.png