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

我不是女神ヾ 2024-02-19 16:11 39阅读 0赞

### animation-duration属性 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
定义和用法  
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计，默认是 0  
默认值： 0  
继承性： no  
版本： CSS3  
JavaScript 语法： object.style.animationDuration=“3s”  
语法

animation-duration: time;

值 描述  
time 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

### 小程序应用 ###

> Wxml代码

<view>注释：始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</view>
    <view class='c01'>01</view>

> Wxss代码

.c01{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove infinite;
    animation-duration:2s;
    }
    @keyframes mymove
    {
    from {top:0px;}
    to {top:200px;}
    }

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

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