微信小程序动画课程-通过wxss(css)来实现-@keyframes 规则

@keyframes 规则

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

通用语法
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
CSS3 动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
 规定动画的名称
 规定动画的时长
实例
把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}

注释：本例在 Internet Explorer 中无效。

效果图 

注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
小程序应用
Wxml代码

01

Wxss代码
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

.c01{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
效果图

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