小程序中动画

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

时间：2019/1/14 14:44:33 作者：互联网来源：网络转载查看：3774 评论：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>

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

</body>

</html>

小程序应用

Wxml代码

<view>注释：始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</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)来实现

标签：animation-name属性微信小程序CSS3动画入门在线视频教程微信小程序界面设计入门课程 wxss中css入门在线视频课程

上一篇：微信小程序动画专题课程-通过wxss(css)来实现-第5课-animation-duration属性
下一篇：微信小程序动画专题课程-通过wxss(css)来实现-第3课-@keyframes 规则-改变颜色和位置

相关文章

相关评论