小程序中动画

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

时间:2019/1/14 14:44:33  作者:互联网  来源:网络转载  查看:3752  评论:0
内容摘要: animation-name属性 通用语法规定 @keyframes 动画的名称 定义和用法animation-name 属性为 @keyframes 动画规定名称。注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。默认值...

 animation-name属性

通用语法

规定 @keyframes 动画的名称

定义和用法

animation-name 属性为 @keyframes 动画规定名称。

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

默认值:

none

继承性:

no

版本:

CSS3

JavaScript 语法:

object.style.animationName="mymove"

语法

animation-name: keyframename|none;

 

描述

keyframename

规定需要绑定到选择器的 keyframe 的名称。

none

规定无动画效果(可用于覆盖来自级联的动画)。

实例

@keyframes 动画规定一个名称:

div

{

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari Chrome */

}

完整代码

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation-name:mymove;

animation-duration:5s;

 

/* Safari and Chrome */

-webkit-animation-name:mymove;

-webkit-animation-duration:5s;

}

 

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

 

@-webkit-keyframes mymove /* Safari and Chrome */

{

from {left:0px;}

to {left:200px;}

}

</style>

</head>

<body>

 

<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>

 

<div></div>

 

<p><b>注释:</b>始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。</p>

 

</body>

</html>

 

小程序应用

 

Wxml代码

<view>注释:始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。</view>

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

Wxss代码

.c01{

width:100px;

height:100px;

background:red;

position:relative;

animation-name:mymove;

animation-duration:5s;

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

效果图
微信小程序动画专题课程-通过wxss(css)来实现-第4课-animation-name属性


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

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


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