学习最好的方法，就是把你知道的告诉别人
在交互里加入动画，能让操作变得更自然，更友好，用户体验更棒，下面来看看css 是如何控制元素产生动画的。
关键帧动画主要由animation 以及@keyframes组成：
animation 控制动画的外观。
@keyframes 控制动画中各个阶段的变化。
先来看这两个属性：
- animation-name：给元素设置动画的名称，该名称表示@keyframes里所定义的动画效果
- animation-duration设置动画所需花费的时间。
每个阶段我们可以用百分比来表示，0%表示动画的开始，100%表示动画的结束，还可以用 from 和 to来表示，from 表示0%，to表示100%，然后在对应的时间里给元素过渡添加动画。
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
animation-name:rainbow;
animation-duration:3s;
}
//第一种写法
@keyframes rainbow {
0% {
background-color:blue;
}
50% {
background-color:green;
}
100% {
background-color:yellow;
}
}
//第二种写法
@keyframes rainbow2 {
from {
background-color:blue;
}
50% {
background-color:green;
}
to {
background-color:yellow;
}
}
</style>
<div id="rect"></div>
