小程序中动画

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

时间:2019/1/14 14:55:43  作者:互联网  来源:网络转载  查看:3812  评论:0
内容摘要:animation-fill-mode属性定义和用法animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。注释:其属性值是由逗号分隔的一个或多个填充模式关键词。默认值:none继承性:no版本:CSS3JavaScript 语法:object....

animation-fill-mode属性

定义和用法

animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

注释:其属性值是由逗号分隔的一个或多个填充模式关键词。

默认值:

none

继承性:

no

版本:

CSS3

JavaScript 语法:

object.style.animationFillMode=none

语法

animation-fill-mode : none | forwards | backwards | both;

 

描述

none

不改变默认行为。

forwards

当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards

animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both

向前和向后填充模式都被应用。

小程序应用

Wxml代码

<view>把物体动画地从一个地方移动到另一个地方,并让它停留在那里</view>

<view class='c01'>01</view>

Wxss代码

.c01{

     width:100px;

     height:100px;

     background:red;

     position:relative;

     animation:mymove 3s;

     animation-iteration-count:2;

     animation-fill-mode:forwards;

 

}

 

@keyframes mymove

{

     from {top:0px;}

     to {top:200px;}

}


效果图

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



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

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



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