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

蔚落 2024-02-19 16:12 12阅读 0赞

### animation-play-state属性 ###

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

定义和用法  
animation-play-state 属性规定动画正在运行还是暂停。默认是 “running”  
注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。  
默认值： running  
继承性： no  
版本： CSS3  
JavaScript 语法： object.style.animationPlayState=“paused”  
语法

animation-play-state: paused|running;

值 描述  
paused 规定动画已暂停。  
running 规定动画正在播放。

### 小程序应用 ###

> Wxml代码

<view>animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。</view>
    <view>paused	规定动画已暂停。</view>
    <view>running	规定动画正在播放。</view>
    
    <view class='c01'>01</view>

> Wxss代码

.c01{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s;
    animation-play-state:paused;
    }
    @keyframes mymove
    {
    from {left:0px;}
    to {left:200px;}
    }

效果图  
![微信小程序动画课程-通过wxss(css)来实现-animation-play-state属性][-_wxss_css_-animation-play-state]

[欢迎大家收看我的视频课程：微信小程序动画课程-通过wxss(css)来实现][-_wxss_css]  
![https://edu.csdn.net/course/detail/12852][https_edu.csdn.net_course_detail_12852]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-animation-play-state]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/59d4940dfbd342b393ab091899e03bc8.png
[-_wxss_css]: https://ke.qq.com/course/370983?tuin=2b10d56
[https_edu.csdn.net_course_detail_12852]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7bfa55ae1dd4426fa75d8f2586a021c1.png