动画

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
  }

  #rect {    /*选取某个盒子给它增加动画*/
  animation-name: rainbow;    /*animation-name的值   放在keyframes 后面*/
  animation-duration: 4s;
  }
  @keyframes rainbow {    /*keyframes里面放不同阶段的css变化    0% 到 100% 间的任意百分比都可以设置*/
  0% {
    background-color: blue;
  }
   50% {
    background-color: green;
  }
  100% {
    background-color: yellow;
  }
}
  
</style>
<div id="rect"></div>