CSS动画每日一学——@keyframes

@keyframes
通过该属性可以改变动画的样式。
在@keyframes规则中指定css样式时，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到元素。
举例：

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 要将动画应用到的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  /*这两句代码可合并为一句*/
  animation-name: example;
  animation-duration: 4s; 
  /*这两句代码可合并为一句：animation: example 4s infinite linear;*/
}

在上面的示例中，我们通过使用关键字“from”和“to”（表示0％（开始）和100％（完成））指定样式何时更改。也可以使用百分比。通过使用百分比，可以根据需要添加任意数量的样式更改。当动画完成25％，完成50％时，以及动画100％完成时：

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* 将动画应用到元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}