小程序中动画

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

时间:2019/1/14 14:48:25  作者:互联网  来源:网络转载  查看:3834  评论:0
内容摘要:animation-delay属性 定义和用法animation-delay 属性定义动画何时开始。animation-delay 值以秒或毫秒计, 默认是 0提示:允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。默认值:0继承性:no版本:CSS3JavaScript...

animation-delay属性

定义和用法

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)来实现-第7课-animation-delay属性


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

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


相关评论
评论者:      验证码:  点击获取验证码
本类推荐
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |