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

animation-duration属性

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

animation-duration: time;

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

小程序应用

Wxml代码

注释：始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
01

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)来实现