【CSS 】动画animation

╰半橙微兮° 2022-07-13 08:14 372阅读 0赞

作为博主简单记录： 深入学习请查看文末参考资料

前面有提到过过渡效果[css transition][],实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的，而且过渡中我们可能需要其他精细操作办不到，这个时候我们需要用到animation了。  
举个简单的例子:

<!DOCTYPE html>
    <html>
    <head>
    <style> @keyframes changeColor { from { background-color:lightseagreen} to { background-color:indianred} } div.color-change-target { background-color: lightseagreen; width:50px; height: 50px; border-radius: 25px; animation: changeColor 5s ease-in-out 2s infinite ; margin: 10px auto; } div.color-change-target2 { background-color: lightseagreen; width:50px; height: 50px; border-radius: 25px; /*animation: changeColor 5s ease-in-out 2s 1 ;*/ margin: 10px auto; } div.color-change-target2:hover { background-color:indianred; transition: background-color 5s } </style>
    </head>
    <body>
    
    <div class="anitation">
        <div class="color-change-target"></div>
        <div class="color-change-target2"></div>
    </div>
    
    </body>
    </html>

请尝试上面的代码,你会发现 hover 到第二个类名为color-change-target2 的div上的时候 背景颜色的变化 和第一个div 在页面载入2s之后的背景颜色变化一模一样。

好的我们直接根据上面的代码来，@keyframes 关键字，这个关键字可以定义在这个过渡转换中 从0-100 【这里0是转换开始，100是转换结束】 这个过程中 每一步的变化。实际上上面定义changeColor的代码可以写成这样,他们是等价的：

@keyframes changeColor {
        0% { background-color:lightseagreen}
        100% { background-color:indianred}
    }

我们进一步修改代码：

@keyframes changeColor {
        0% { background-color:lightseagreen}
        50% { background-color:indianred; border-radius: 0}
        100% { background-color:lightseagreen;border-radius: 25px}
    }

刷新页面你会看到，在变化的这5s内 在第2.5s时,圆角不在变成了矩形，并且背景颜色变成了红色。  
当然你在定义的时候,完全可以设定1% 2% 3%…..并且设定不同属性组合。当然这里面的css属性 和 transition支持的属性是一模一样，也就是说这些属性([传送门][Link 1])被设定才会有动画效果。 [MDN 参考][MDN]

[animation][] 和 transition一样是一些列属性的简写形式.  
你可以加上试试这个效果：

.circle { width: 30px; height: 30px; border-radius: 30px; background-color:aquamarine; margin-bottom: 30px; margin-left: 30px; animation: scaling 1s infinite ease-in-out; }
    
      @keyframes scaling{
        0%{ opacity:0.3; transform: scale(1,1); box-shadow: 0px 0px 0px mediumseagreen; }
        100%{ opacity:1; transform: scale(1.2,1.2); box-shadow: 0px 0px 10px mediumseagreen; }
      }

深入学习请狠狠的点击这个：  
[大漠老师 CSS3 animation][CSS3 animation]  
[w3c animation][]  
[MDN animtaion][animation]

[css transition]: http://blog.csdn.net/a5534789/article/details/53415971
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
[animation]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
[CSS3 animation]: http://www.w3cplus.com/content/css3-animation
[w3c animation]: http://www.w3school.com.cn/cssref/pr_animation.asp