微信小程序动画课程-通过wxss(css)来实现-animation-delay属性
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;}
}
效果图