小程序中动画

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

时间:2019/1/14 14:32:47  作者:互联网  来源:网络转载  查看:3875  评论:0
内容摘要:@keyframes 规则通用语法如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。浏览器支持Internet Explor...

@keyframes 规则

通用语法

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

浏览器支持

微信小程序动画专题课程-通过wxss(css)来实现-第1课-@keyframes_规则

Internet Explorer 10Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome Safari 需要前缀 -webkit-

注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

CSS3 动画

当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

{C}Ø  {C}{C}规定动画的名称

{C}Ø  {C}{C}规定动画的时长

实例

"myfirst" 动画捆绑到 div 元素,时长:5 秒:

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

 

@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;}

}

</style>

</head>

<body>

 

<div></div>

 

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

 

</body>

</html>

效果图
微信小程序动画专题课程-通过wxss(css)来实现-第1课-@keyframes_规则 微信小程序动画专题课程-通过wxss(css)来实现-第1课-@keyframes_规则

注释:您必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0

小程序应用

Wxml代码

<view class='c01'>

01

</view>

Wxss代码

@keyframes myfirst

{

     from {background:red;}

     to {background:yellow;}

}

 

.c01{

  width:100px;

     height:100px;

     background:red;

     animation:myfirst 5s;

}

效果图
微信小程序动画专题课程-通过wxss(css)来实现-第1课-@keyframes_规则 微信小程序动画专题课程-通过wxss(css)来实现-第1课-@keyframes_规则


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

微信小程序动画专题课程-通过wxss(css)来实现-第1课-@keyframes_规则

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