CSS 的关键帧动画

学习最好的方法，就是把你知道的告诉别人

在交互里加入动画，能让操作变得更自然，更友好，用户体验更棒，下面来看看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>