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

灰太狼 2024-02-19 16:11 37阅读 0赞

### animation-delay属性 ###

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

定义和用法  
animation-delay 属性定义动画何时开始。  
animation-delay 值以秒或毫秒计, 默认是 0  
提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。  
默认值： 0  
继承性： no  
版本： CSS3  
JavaScript 语法： object.style.animationDelay=“2s”  
语法

animation-delay: time;

值 描述  
time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

### 小程序应用 ###

> 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; 
    animation-delay:2s; /* animation-delay	规定动画何时开始。默认是 0。 */
    }
    @keyframes mymove
    {
    from {left:0px;}
    to {left:200px;}
    }
    
    .c02{
    width: 100px; height: 100px;
    position:relative;
    animation:mymove2 5s infinite;
    animation-delay:1s; /* animation-delay	规定动画何时开始。默认是 0。 */
    }
    @keyframes mymove2
    {
    from {left:0px;}
    to {left:200px;}
    }

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

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

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