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

Bertha 。 2024-02-19 16:11 7阅读 0赞

### @keyframes 规则 ###

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

通用语法  
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。  
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。  
浏览器支持  
![微信小程序动画课程-通过wxss(css)来实现-@keyframes 规则][-_wxss_css_-_keyframes]  
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 中无效。

效果图 !\[微信小程序动画课程-通过wxss(css)来实现-@keyframes 规则\](https://img-blog.csdnimg.cn/20190119190105870.png)

注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。  
小程序应用  
Wxml代码  
  
01  
  
Wxss代码  
@keyframes myfirst  
\{  
from \{background:red;\}  
to \{background:yellow;\}  
\}

.c01\{  
width:100px;  
height:100px;  
background:red;  
animation:myfirst 5s;  
\}  
效果图  
![微信小程序动画课程-通过wxss(css)来实现-@keyframes 规则][-_wxss_css_-_keyframes 1]  
[欢迎大家收看我的视频课程：微信小程序动画课程-通过wxss(css)来实现][-_wxss_css]

![微信小程序动画课程-通过wxss(css)来实现][-_wxss_css 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-_keyframes]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7e1fb2bedb2f48de94dc9bd50768d276.png
[-_wxss_css_-_keyframes 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8f29ff6c9070407f870ab24696cd56ce.png
[-_wxss_css]: https://ke.qq.com/course/370983?tuin=2b10d56
[-_wxss_css 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/bbeb691801454683a087344b5664469b.png