前端提高篇CSS3进阶15：animation动画

在CSS3中，animation属性是用来创建动画的。它是一个简写属性，用于设置六个动画相关的CSS属性：

• animation-name：定义关键帧的名称。
• animation-duration：定义动画完成一个周期所需的时间。
• animation-timing-function：定义动画的速度曲线。
• animation-delay：定义动画何时开始。
• animation-iteration-count：定义动画应该播放的次数。
• animation-direction：定义是否应该轮流反向播放动画。

下面是一个简单的例子，展示了如何使用animation属性创建一个简单的动画：

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
div {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  width: 100px;
  height: 100px;
  background-color: red;
}

在这个例子中，div元素的背景颜色会从红色变为黄色，动画的持续时间是4秒，每次动画的持续时间是2秒，动画无限次数循环播放，并且动画在每次迭代中方向会反向。