CSS 动画 - 绿叶网

CSS 动画技术，可以使得我们不借助 JavaScript 的情况下，来实现平滑的过渡和动画效果。CSS 动画可以应用于各种网页元素，包括文本、图像、按钮等，从而大大提高用户体验。

CSS 动画属性

在 CSS3 中，我们可以使用 animation 属性来实现元素的动画效果。animation 属性跟 transition 属性在功能实现上是非常相似的，都是通过改变元素的属性值来实现动画效果。但是这两者实际上有着本质上的区别。

对于 transition 属性来说，它只能将元素的某一个属性从一个属性值过渡到另一个属性值。
对于 animation 属性来说，它可以将元素的某一个属性从第 1 个属性值过渡到第 2 个属性值，然后还可以继续过渡到第 3 个属性值，以此类推。

从上面我们可以清楚地知道：transition 属性（即 CSS 过渡）只能实现一次性的动画效果，而 animation 属性（即 CSS 动画）可以实现连续性的动画效果。

语法：

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

说明：

animation 是一个复合属性，它可以设置一个或多个动画效果。它包含 8 个子属性，如下表所示。

animation 的子属性
属性	说明
animation-name	动画的名称
animation-duration	动画的持续时间
animation-timing-function	动画的速率方式
animation-delay	动画的延迟时间
animation-iteration-count	动画的播放次数
animation-direction	动画的播放方向，正向还是反向
animation-fill-mode	指定动画在播放之前和之后如何应用样式
animation-play-state	指定动画的播放状态

提示: 由于 animation 属性写法非常复杂，因此在实际项目开发中，我们推荐使用子属性写法，而不推荐使用复合属性写法。

1. animation-name

animation-name 属性用于指定动画的名称，这个名称需要和 @keyframes 规则中定义的动画名称一致。

2. animation-duration

animation-duration 属性用于指定动画的持续时间。它的取值是一个时间值，单位可以是秒（s）或毫秒（ms）。

例如，animation-duration: 2s; 表示动画的持续时间为 2 秒。

3. animation-timing-function

animation-timing-function 属性用于指定动画的时间函数。时间函数决定了动画的速度曲线，可以让动画效果看起来更加自然。它常用的取值有以下几种。

linear：匀速动画。
ease（默认值）：先加速后减速的动画。
ease-in：加速的动画。
ease-out：减速的动画。
ease-in-out：先加速后减速再加速的动画。

4. animation-delay

animation-delay 属性用于指定动画的延迟时间。它的取值也是一个时间值，单位可以是秒（s）或毫秒（ms）。

例如，animation-delay: 1s; 表示动画在 1 秒后开始执行。

5. animation-iteration-count

animation-iteration-count 属性用于指定动画的播放次数。它的取值是一个整数，表示动画播放的次数。

例如，animation-iteration-count: 3; 表示动画播放 3 次。如果需要动画无限循环播放，则取值为 infinite。

6. animation-direction

animation-direction 属性用于指定动画的播放方向。它常用的取值有以下几种。

normal（默认值）：动画向前播放。
reverse：动画反向播放。
alternate：动画在奇数次向前播放，在偶数次反向播放。
alternate-reverse：动画在奇数次反向播放，在偶数次向前播放。

7. animation-fill-mode

animation-fill-mode 属性用于指定动画在播放之前和之后如何应用样式。它常用的取值有以下几种。

none（默认值）：动画不向前或向后填充样式。
forwards：动画结束后，保持最后一帧的样式。
backwards：动画开始前，应用第一帧的样式。
both：动画开始前应用第一帧的样式，结束后保持最后一帧的样式。

8. animation-play-state

animation-play-state 属性用于指定动画的播放状态。它常用的取值有以下几种。

running（默认值）：动画正在播放。
paused：动画暂停播放。

@keyframes 规则

在使用 CSS 动画时，我们必须先使用 @keyframes 规则来定义动画的 keyframes（关键帧）。

语法：

@keyframes animation-name {
    from {
        /* 初始状态的样式 */
    }
    to {
        /* 结束状态的样式 */
    }
}

说明：

@keyframes 规则用于定义动画的名称和关键帧。其中，animation-name 是动画的名称，需要和 animation 属性的 name 子属性值一致。from 表示动画的初始状态，to 表示动画的结束状态。

在 @keyframes 规则中，我们可以定义任意多个关键帧，可以使用 from 和 to，也可以使用百分比来表示动画的不同阶段，比如：

@keyframes animation-name {
    0% {
        /* 初始状态的样式 */
    }
    50% {
        /* 中间状态的样式 */
    }
    100% {
        /* 结束状态的样式 */
    }
}

CSS 动画示例

接下来，我们通过几个简单的例子来讲解 CSS 动画是如何使用的。

示例 1：CSS 定义移动动画

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 定义动画 */
        @keyframes move {
            from {
                left: 0;
            }
            to {
                left: 300px;
            }
        }
        div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: hotpink;
            position: absolute;
            /* 调用动画 */
            animation-name: move;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。其中，粉红色小球会从左向右移动，并且无限循环播放。

CSS 为元素定义移动动画

分析：

想要使用 CSS 动画，我们需要执行 2 步：① 定义动画；② 调用动画。首先，我们需要使用 @keyframes 规则来定义一个动画。

/* 定义动画 */
@keyframes move {
    from {
        left: 0;
    }
    to {
        left: 300px;
    }
}

上面代码表示定义一个名为 “move” 的动画。在动画的开始处（from），left 的取值为 0。然后在动画的结尾处（to），left 的取值为 300px。

定义好动画规则之后，我们还需要调用动画，这样动画才会生效。

/* 调用动画 */
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;

animation-name: move; 表示调用名为 “move” 的动画，这个动画名要与 @keyframes 定义的动画名一致。animation-duration: 2s; 表示动画持续时间为 2s，而 animation-iteration-count: infinite; 表示定义动画循环次数为无限次。

注意:

一般情况下，动画的定义（即 @keyframes 规则）都是在所有样式的开头处定义。
如果不使用 animation-iteration-count: infinite;，此时动画执行一次就停止了，其效果与过渡效果无异了。

示例 2：CSS 定义旋转动画

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 定义动画关键帧 */
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        div {
            width: 100px;
            height: 100px;
            margin: 100px;
            background-color: lightskyblue;
            /* 调用动画 */
            animation-name: rotate;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。其中，天蓝色方块会不断旋转，并且无限循环播放。

CSS 为元素添加旋转动画

分析：

在这个例子中，我们定义了一个名为 rotate 的动画，动画的持续时间为 2 秒，播放次数为无限循环。在 @keyframes 规则中，我们定义了动画的初始状态和结束状态，即 div 元素从旋转 0 度到旋转 360 度。

示例 3：CSS 定义颜色变化动画

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 定义动画关键帧 */
        @keyframes changeColor {
            0% {
                background-color: hotpink;
            }
            50% {
                background-color: lightskyblue;
            }
            100% {
                background-color: orange;
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            /* 调用动画 */
            animation-name: changeColor;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。其中，方块的颜色会 “hotpink、lightskyblue、orange” 之间变化，并且无限循环播放。

CSS 定义为元素添加颜色变化动画

分析：

在这个例子中，我们定义了一个名为 changeColor 的动画，动画的持续时间为 2 秒，播放次数为无限循环。

在 @keyframes 规则中，我们使用百分比定义了动画的关键帧，即 div 元素在 0% 时为 hotpink，50% 时为 lightskyblue，100% 时又变为 orange。