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

时间:2024-04-05 07:18:59

animation-duration属性

定义和用法
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)来实现
微信小程序动画课程-通过wxss(css)来实现-animation-duration属性