深入了解CSS3动画：animation属性详解

CSS3的 animation 属性可以用来创建各种各样的动画效果，包括旋转、缩放、移动、闪烁等。本文介绍了 animation 属性的所有相关属性和取值，让你深入了解CSS3动画的实现方式和实现效果。

基本概念

animation 属性定义了一组动画效果，包括动画名称、持续时间、时间函数、重复次数、方向等。在使用 animation 属性之前，首先需要定义动画关键帧。关键帧是动画的关键状态，表示动画从开始到结束过程中的所有状态。关键帧通常用 @keyframes 来定义，包括关键帧的名称和所有状态的取值。

@keyframes rotate {
0%   { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

在上述例子中，我们定义了一个名为 rotate 的动画关键帧。这个关键帧包括了两个状态，在 0% 和 100% 时分别取值为 rotate(0deg) 和 rotate(360deg) ，表示动画从开始状态旋转到结束状态。有了动画关键帧的定义之后，就可以通过 animation 属性来使用动画了。

animation属性

animation 属性包含了一些子属性，用于定义动画的各种属性和取值。下面一一介绍这些属性。

animation-name

animation-name 属性定义动画的名称，该名称应与 @keyframes 中定义的名称相同。可以同时指定多个名称，多个动画将叠加在一起形成一个整体动画效果。

animation-name: rotate;

在上述例子中， animation-name 属性将动画的名称设为 rotate ，表示使用 @keyframes 中定义的 rotate 动画关键帧。

animation-duration

animation-duration 属性定义了动画的持续时间，以秒或毫秒为单位。默认值为 0，表示不进行动画。

animation-duration: 2s;

在上述例子中， animation-duration 属性将动画的持续时间设为 2 秒。

animation-timing-function

animation-timing-function 属性定义了动画的时间函数，即动画在播放时速度的变化。有许多可用的时间函数，包括线性、ease、ease-in、ease-out、ease-in-out等等。默认值为 ease 。

animation-timing-function: linear;

在上述例子中， animation-timing-function 属性将动画的时间函数设为线性的，即速度不会变化，会保持匀速。

animation-delay

animation-delay 属性定义了动画的延迟时间，即动画开始播放前的等待时间，以秒或毫秒为单位。默认值为 0。

animation-delay: 1s;

在上述例子中， animation-delay 属性将动画的延迟时间设为 1 秒。

animation-iteration-count

animation-iteration-count 属性定义了动画应该播放的次数。取值可以是一个整数或者关键字 infinite ，表示无限播放。默认值为 1。

animation-iteration-count: infinite;

在上述例子中， animation-iteration-count 属性将动画设为无限播放。

animation-direction

animation-direction 属性定义了动画的播放方向，可以是正向、反向、交替正反向、或反向交替正反向。默认值为 normal ，即正向播放。

animation-direction: alternate;

在上述例子中， animation-direction 属性将动画的播放方向设为交替正反向。

animation-fill-mode

animation-fill-mode 属性定义了动画结束后的状态，包括是否保留最后一帧的样式和动画结束后回到开始状态或者保留结束状态。默认值为 none 。

animation-fill-mode: both;

在上述例子中， animation-fill-mode 属性将动画结束后的状态设为保留最后一帧的样式和动画结束后回到开始状态。

animation-play-state

animation-play-state 属性定义了动画的播放状态，可以是暂停或播放。默认值为 running 。

animation-play-state: paused;

在上述例子中， animation-play-state 属性将动画的播放状态设为暂停。

总结

animation 属性是 CSS3 动画的核心属性之一，可以创建各种各样的动画效果。通过组合变换属性

animation基础介绍