初探keyframes-animation

2019年9月7日 135次阅读 来源: 金博小倩

keyframes被称为关键帧，类似于flash中的关键帧。在Css3中主要以@keyframes坐开头，后面接着是动画名称+{}，“{}“中就是不同时间段的样式规则了。当然之前要对transition有一丢丢了解的最好。语法例如：

@keyframes changecolor{

0%{background:red;}

100{background:blue;}​

}

@keyframes中的规则可以是多个百分比，在0%~100%之间，在每个百分比的花括号内写自己需要的样式，从而达到在不断变化的效果。​当然，也可以用关键词from，to代替，0%对应from,100%对应to,也就是”从“一个效果”到“另一效果，这个还是比较好理解的。

浏览器支持情况W3C给出这样：
《初探keyframes-animation》

​​​慕课上的简单demo:鼠标悬浮时有弹动效果（自己有调整一下）

style.css:

@keyframes wobble { 

 0% { margin-left: 100px; background:green; } 

 40% { margin-left:150px; background:orange; } 

 60% { margin-left: 75px; background: blue; } 

 100% { margin-left: 100px; background: red; }

 } 

div { margin-left: 100px; width: 100px; height: 100px; background:red; color: #fff; } 

div:hover{ animation: wobble 5s ease .1s; }

index.html:


    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8">
    <title>变形与动画</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head> 
    <body>
    <div>鼠标放在我身上 </div>
    
    </body>
    </html>

鼠标放在我身上
W3C中关于keyframes的效果与代码：

http://www.w3school.com.cn/ti…

    原文作者：金博小倩
    原文地址: https://segmentfault.com/a/1190000007546592
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞