CSS3 简写animation

当我们需要为网站设计动画效果时，CSS3提供了强大的动画功能。其中非常重要的一个功能就是animation简写属性，它可以让我们快速设置动画效果。

animation属性

animation属性是由多个子属性组成的简写属性。下面是animation属性的完整语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

其中，第一个参数name是必需的，其他参数都是可选的。下面是每个参数的作用：

• name：动画的名称。动画名称指的是在@keyframes中定义的动画。
• duration：动画的时长。它可以是一个数字值或一个时间值。如：1s或2.5s。
• timing-function：动画的时间函数。它控制动画的速度变化。如：linear（匀速）、ease-in（慢到快）、ease-out（快到慢）、ease-in-out（慢到快再到慢）等。
• delay：动画延迟多长时间开始执行。它可以是一个数字值或一个时间值。如：0.5s或1s。
• iteration-count：动画的循环次数。它可以是一个数字值或关键字。如：1、3、infinite。
• direction：动画是否反向播放。它可以是关键字：normal（顺序播放）、reverse（反向播放）、alternate（来回播放）和alternate-reverse（反向来回播放）。
• fill-mode：设置动画的最终状态。它可以是关键字：none（回到起始状态）、forwards（保留最后一帧）、backwards（使用起始帧）、both（同时应用forwards和backwards）。
• play-state：动画的播放状态。它可以是关键字：running（播放中）和paused（暂停）。

下面是一个简单的animation属性的示例：

div {
    animation: mymove 2s linear 1s infinite alternate;
}

这个示例中，动画名称为mymove，动画时长为2s，时间函数为linear，延迟1s后开始执行，循环播放，并且每次播放时倒转方向。

简写动画animation示例

下面是两个简写动画animation的示例：

示例一：旋转动画

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg);}
  to { transform: rotate(360deg);}
}

这个示例中，我们给一个蓝色的div添加了一个旋转动画，动画名称为rotate，动画时长为2秒，动画时间函数为线性变化，循环播放。

示例二：闪烁动画

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: blinking 2s ease-in-out infinite;
}
@keyframes blinking {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

这个示例中，我们给一个蓝色的div添加了一个闪烁动画，动画名称为blinking，动画时长为2秒，动画时间函数为缓进缓出，循环播放。在动画的关键帧中，我们设置了3个帧，分别为开始（0%）、中间（50%）、结束（100%），每个帧的透明度不同，效果就是一个闪烁的动画。

总之，animation属性是我们实现动画效果的一种强大工具，我们可以通过简写它的各个参数，让动画的设置更加快速、方便。