记录前端历程：CSS关键帧与动画animation+@keyframes

来给CSS加个动画吧

如果要给元素添加动画，我们需要使用animation属性+@keyframes。

animation属性控制动画的外观，@keyframes规则控制动画中各阶段的变化。

animation-name设置动画的名称， 也就是要绑定的选择器的@keyframes的名称。 animation-duration设置动画所花费的时间。 @keyframes能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性，以百分比来规定改变的时间，或者通过关键词“from”和“to”，等价于 0% 和 100%。打个比方，CSS 里面的 0% 属性就像是电影里面的开场镜头。CSS 里面的 100% 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。CSS 在对应的时间内给元素过渡添加效果。

来举例说明@keyframes和动画属性的用法：

先创建一个长方体，再设置动画

<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
animation-name:rainbow;
animation-duration:4s;           <!--在四秒内完成-->
animation-iteration-count:10;    <!--控制循环次数（设置infinite为一直循环）-->
}
@keyframes rainbow{
0%{
background-color:blue;
}
50%{
background-color:green;
}
100%{
background-color:yellow;
}
}
</style>
<div id="rect"></div>

效果图如下：