CSS 动画

CSS 动画允许 HTML 元素在不同的样式配置之间平滑过渡。例如，

悬停以开始动画效果

CSS 动画通常用于增强用户体验和为网站增添视觉趣味。

CSS 动画的优点包括提高性能、减少对 JavaScript 的依赖，以及通过视觉吸引人的效果提升用户体验。

CSS 动画属性

CSS 动画具有以下属性

@keyframes 规则
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

我们将逐一详细介绍这些属性。

注意：CSS 动画涉及定义关键帧样式并将它们绑定到 HTML 元素以进行动画。

关键帧规则

CSS @keyframes 规则在动画期间的各个时间点定义元素样式。

关键帧使用百分比定义。0% 关键帧是动画的起点，100% 关键帧是终点。

中间的百分比定义了动画的中间步骤。例如，

@keyframes animate-background {
  0% {
    background-color: orange;
  }
  100% {
    background-color: red;
  }
}

在此，元素的背景色在动画期间从 orange 逐渐变为 red。

而 animate-background 是将关键帧样式与 HTML 元素关联的动画名称。

创建简单动画

要创建简单动画，除了 @keyframes 规则外，还需要 animation-name 和 animation-duration 属性。

让我们看一个例子，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Document</title>
    </head>
    <body>
        <div></div>
        <p>Hover above div to see animation.</p>
    </body>

</html>

div {
    width: 100px;
    height: 100px;
    background-color: purple;
}

div:hover {
    /* Specifies the animation name */
    animation-name: animate-background;

    /* Specifies the animation duration */
    animation-duration: 5s;
}

@keyframes animate-background {
    0% {
        background-color: orange;
    }

    100% {
        background-color: green;
    }
}

浏览器输出

悬停在 div 上可查看动画。

在上面的例子中：

animation-name: animate-background 指定动画名称
animation-duration: 5s 指定动画持续时间

@keyframes 规则使用 animate-background 动画名称将关键帧样式绑定到 div 元素。

结果是，在动画持续时间内，div 元素的背景颜色从 orange 逐渐变为 green。

最后，动画完成后，背景色会恢复为最初指定的 purple 颜色。

CSS animation-delay 属性

animation-delay 属性指定动画开始前的延迟时间。它可以以秒 (s) 或毫秒 (ms) 为单位。

让我们看一个例子，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS animation-delay</title>
    </head>

    <body>
        <p>
            Hover the pink container to see animation. The animation starts
            after 2 seconds of hover and stops when the mouse leaves the
            container.
        </p>

        <div class="container">
            <div class="inner-div"></div>
        </div>
    </body>
</html>

.container {
    max-width: 700px;
    background-color: pink;
    padding: 20px;
}

.inner-div {
    width: 100px;
    height: 100px;
    background-color: purple;
    position: relative;
    top: 0;
}

.container:hover .inner-div {
    /* specifies the animation name */
    animation-name: move-to-right;

    /* specifies the animation duration */
    animation-duration: 5s;

    /* delays the animation by 2 seconds */
    animation-delay: 2s;
}

@keyframes move-to-right {
    0% {
        top: 0%;
        left: 0%;
    }

    100% {
        top: 0%;
        left: 85%;
    }
}

浏览器输出

悬停在粉色容器上以查看动画。动画在悬停 2 秒后开始，并在鼠标离开容器时停止。

在上例中，动画在悬停在 pink 容器上 2s 延迟后开始。

CSS animation-iteration-count 属性

animation-iteration-count 属性指定动画应播放的次数。

animation-iteration-count 属性的值可以是整数，或者使用 once 和 infinite 关键字。

让我们看一个例子，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Animation</title>
    </head>

    <body>
        <p>
            Hover the pink container to see animation. The animation repeats 2
            times.
        </p>
        <div class="container">
            <div class="inner-div"></div>
        </div>
    </body>
</html>

.container {
    max-width: 700px;
    padding: 20px;
    background-color: pink;
}

.inner-div {
    width: 100px;
    height: 100px;
    background-color: purple;
    position: relative;
    top: 0;
}

.container:hover .inner-div {
    /* specifies the animation name */
    animation-name: move-to-right;

    /* specifies the animation duration */
    animation-duration: 3s;

    /* repeats the animation 2 times */
    animation-iteration-count: 2;
}

@keyframes move-to-right {
    0% {
        top: 0%;
        left: 0%;
    }

    100% {
        top: 0%;
        left: 85%;
    }
}

浏览器输出

悬停在粉色容器上以查看动画。动画重复播放 2 次。

在上面的例子中：

animation-iteration-count: 2;

动画重复两次。

CSS animation-direction 属性

animation-direction 属性指定动画的方向。

animation-direction 属性的可能值为：

normal：动画向前播放，默认值
reverse：动画向后播放
alternate：动画在向前和向后之间交替
alternate-reverse：动画在向后和向前之间交替

让我们看一个例子，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS animation-direction</title>
    </head>

    <body>
        <p>
                Hover the pink container to see animation. The animation repeats
                2 times in alternate directions: forward and backward
                respectively.
            </p>
        <div class="container">
            <div class="inner-div"></div>           
        </div>
    </body>

</html>

.container {
    max-width: 700px;
    background-color: pink;
    padding: 20px;
}

.inner-div {
    width: 100px;
    height: 100px;
    background-color: purple;
    position: relative;
    top: 0;
}

.container:hover .inner-div {
    /* specifies the animation name */
    animation-name: move-to-right;

    /* specifies the animation duration */
    animation-duration: 3s;

    /* repeats the animation 2 times */
    animation-iteration-count: 2;

    /* alternates the animation in forward and backward direction */
    animation-direction: alternate;
}

@keyframes move-to-right {
    0% {
        top: 0%;
        left: 0%;
    }

    100% {
        top: 0%;
        left: 85%;
    }
}

浏览器输出

悬停在粉色容器上以查看动画。动画以交替方向重复播放 2 次：分别向前和向后。

在上面的例子中：

animation-direction: alternate;

以交替方向移动动画：分别向前和向后。

注意：应将 animation-iteration-count 属性设置为至少 2 以便可视化 animation-direction 属性。

如果值设置为 1，动画将只播放一次，animation-direction 属性将不起作用。

CSS animation-timing-function 属性

animation-timing-function 属性指定在动画持续时间内中间属性值的计算方式。

animation-timing-function 属性具有以下值：

ease：动画开始慢，中间加速，结束慢
ease-in：动画开始慢，结束快
ease-out：动画开始快，结束慢
ease-in-out：动画开始慢，加速快，结束慢
linear：在整个动画持续时间内保持匀速
cubic-bezier(n, n, n, n)：允许手动定义动画速度

让我们看一个例子，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Animation Speed</title>
    </head>

    <body>
        <p>
            Hover the pink container to visualize effect of different
            animation-timing-function values.
        </p>
        <div class="container">
            <div class="box box-1">ease</div>
            <div class="box box-2">ease-in</div>
            <div class="box box-3">ease-out</div>
            <div class="box box-4">ease-in-out</div>
            <div class="box box-5">linear</div>
            <div class="box box-6">cubic-bezier</div>
        </div>
    </body>
</html>

.container {
    max-width: 700px;
    background-color: pink;
}

.container > div {
    width: 100px;
    border: 1px solid black;
    background-color: orange;
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
}

/* adds animation after hovering the container div element */
.container:hover div {
    /* specify the animation name */
    animation-name: move-to-right;

    /* specify the animation duration */
    animation-duration: 5s;
}

@keyframes move-to-right {
    0% {
        left: 0;
    }

    100% {
        left: 85%;
    }
}

/* specifies the timing function for the first div */
div.box-1 {
    animation-timing-function: ease;
}

/* specifies the timing function for the second div */
div.box-2 {
    animation-timing-function: ease-in;
}

/* specifies the timing function for the third div */
div.box-3 {
    animation-timing-function: ease-out;
}

/* specifies the timing function for the fourth div */
div.box-4 {
    animation-timing-function: ease-in-out;
}

/* specifies the timing function for the fifth div */
div.box-5 {
    animation-timing-function: linear;
}

/* specifies the timing function for the sixth div */
div.box-6 {
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

浏览器输出

悬停在粉色容器上可可视化不同 animation-timing-function 值的效果。

以上示例说明了不同 timing function 的不同动画速度。

CSS animation-fill-mode 属性

animation-fill-mode 属性决定了动画在动画之前和之后如何应用于元素。

默认情况下，动画仅在动画持续期间影响目标元素。

animation-fill-mode 属性具有以下可能值：

none：动画之前和之后均不应用样式（默认值）
forwards：最后一帧的关键帧样式在动画结束后应用
backwards：第一帧的关键帧样式在动画开始前应用
both：同时应用动画之前和之后的样式

让我们看一个例子，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Animation Mode</title>
    </head>

    <body>
        <p>
            Hover this container to look effect of animation-fill-mode values.
        </p>
        <div class="container">
            <div class="box box-1">forwards</div>
            <div class="box box-2">backwards</div>
            <div class="box box-3">both</div>
            <div class="box box-4">none</div>
        </div>
    </body>
</html>

.container {
    max-width: 700px;
    background-color: pink;
}

.container > div {
    width: 100px;
    border: 1px solid black;
    background-color: orange;
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
}

/* adds animation after hovering the container div element */
.container:hover div {
    /* specify the animation name */
    animation-name: move-to-right;

    /* specify the animation duration */
    animation-duration: 5s;
}

@keyframes move-to-right {
    0% {
        left: 0;
        background-color: red;
    }

    100% {
        left: 85%;
        background-color: yellow;
    }
}

/* specifies the animation fill mode for first div */
div.box-1 {
    animation-fill-mode: forwards;
}

/* specifies the animation fill mode for second div */
div.box-2 {
    animation-fill-mode: backwards;
}

/* specifies the animation fill mode for third div */
div.box-3 {
    animation-fill-mode: both;
}

/* specifies the animation fill mode for fourth div */
div.box-4 {
    animation-fill-mode: none;
}

浏览器输出

悬停此容器以查看 animation-fill-mode 值的效果。

forwards

backwards

both

none

以上示例说明了 animation-fill-mode 属性的效果。

CSS animation 属性

animation 属性是一个简写属性，它将多个与动画相关的属性合并到单个声明中。

animation 属性的语法如下：

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

让我们看一个例子，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS animation Property</title>
    </head>

    <body>
        <p>Hover over the pink container to start animation.</p>
        <div class="container">
            <div class="inner-div"></div>
        </div>
    </body>
</html>

.container {
    max-width: 700px;
    height: 150px;
    padding: 20px;
    background-color: pink;
}

.inner-div {
    width: 100px;
    height: 140px;
    background: linear-gradient(to right, orange, red);
    position: relative;
}

.container:hover .inner-div {
    /* shorthand animation property */
    animation: animate-div 2s ease-in-out 0.1s 3 alternate forwards;
}

@keyframes animate-div {
    0% {
        left: 0%;
    }
    100% {
        left: 80%;
    }
}

浏览器输出

悬停在粉色容器上以开始动画。

在上面的例子中：

animation: rotate-div 4s linear 2s 4 normal forwards;

等同于：

animation-name: rotate-div;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 4;
animation-direction: normal;
animation-fill-mode: forwards;

注意：transition 属性用于创建基本的动画，这些动画可以在两个状态之间平滑过渡：初始状态和最终状态。

然而，与 animation 属性不同，它不支持中间步骤或多个关键帧。

热门教程

认证课程

成为认证的 CSS 专家
程序员。

热门教程

热门实例

CSS 简介

组合器和选择器

CSS 字体

文本格式化

CSS 背景

CSS 渐变

CSS 边框

CSS 盒模型

显示和定位

CSS 浮动布局

CSS 弹性盒

CSS 网格

CSS 响应式设计

CSS 过渡、变换和动画

样式化元素

CSS 项目

CSS 动画

CSS 动画属性

关键帧规则

创建简单动画

CSS animation-delay 属性

CSS animation-iteration-count 属性

CSS animation-direction 属性

CSS animation-timing-function 属性

CSS animation-fill-mode 属性

CSS animation 属性

目录

热门教程

认证课程

成为认证的 CSS 专家程序员。

热门教程

热门实例

CSS 简介

组合器和选择器

CSS 字体

文本格式化

CSS 背景

CSS 渐变

CSS 边框

CSS 盒模型

显示和定位

CSS 浮动布局

CSS 弹性盒

CSS 网格

CSS 响应式设计

CSS 过渡、变换和动画

样式化元素

CSS 项目

网页教程

CSS 动画

CSS 动画属性

关键帧规则

创建简单动画

CSS animation-delay 属性

CSS animation-iteration-count 属性

CSS animation-direction 属性

CSS animation-timing-function 属性

CSS animation-fill-mode 属性

CSS animation 属性

目录

相关教程

成为认证的 CSS 专家
程序员。