Css 简明教程

CSS - Animations

CSS animations 允许在不同的样式之间创建平滑的过渡，而无需使用 JavaScript。例如，

What is CSS Animation?

在 CSS 中，我们可以基于时间阶段、用户交互或被称为 CSS 动画的状态更改来动态更改元素的样式。这是通过使用 @keyframes 规则创建动画以及使用 animation 属性将其应用到元素中来实现的。

The @keyframes Rule

@keyframes 规则用于为动画定义关键帧，指定动画元素在动画的各个阶段的外观。考虑以下定义关键帧规则的代码。

.box{
    animation: colorChange 5s infinite;
}

@keyframes colorChange {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blue;
    }
}

此代码将定义 class 为 .box 的元素的动画，动画的名称为 colorChange，持续时间为 5 秒，且次数为无限。

关键帧规则定义为名为 colorChange 的动画。

在动画的总时长的 0% 处（即，0 秒），背景颜色将为红色。
在总时长的 50% 处（即，2.5 秒），背景颜色变为绿色。
在动画的总时长的 100% 处（即，5 秒），颜色变为蓝色。

Animation Delay Property

我们可以使用 * animation-delay* 属性设置动画开始的延迟时间。查看以下示例

你还可以对 animation-delay 属性设置负值。如果你使用负值 -n，则动画将会启动，就好像它已经播放了 n 秒。

Example

在此示例中，小球将在 2 秒后开始向左移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute;
            left: 0;

            animation-name: moveRight;
            /* Set duration */
            animation-duration: 2s;
            /* Set delay for animation */
            animation-delay: 2s;
        }

        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="ball"></div>
    </div>
</body>
</html>

Set Animation Iteration Count

我们可以使用 * animation-iteration-count* 属性设置动画重复自己的次数。

CSS 规范不支持此属性的负值。它可以将值设为正整数（例如，1、2、3 等）或关键词“infinite”。

Example

在此示例中，我们把球循环计数设置为无限循环。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute;
            left: 0;

            animation-name: moveRight;
            /* Set duration */
            animation-duration: 2s;
            /* Set number of time animation repeats */
            animation-iteration-count: infinite;
        }

        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="ball"></div>
    </div>
</body>
</html>

Animation Direction Property

我们可以使用 * animation-direction 属性来指定动画运行的方向。 *

动画方向属性的有效值如下

normal: 动画正常播放（向前）。这是默认设置。
reverse: 动画以倒放方向播放（向后）。
alternate: 动画先向前播放，然后倒放。
alternate-reverse: 动画先倒放，然后向前播放。

Example

在此示例中，我们使用行内 CSS 来设置动画方向属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: relative;
            left:0;

            animation-name: moveRight ;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <h2>animation-direction: normal</h2>
    <div class="ball"
         style="animation-direction: normal; ">
    </div>

    <h2>animation-direction: reverse</h2>
    <div class="ball"
         style="animation-direction: reverse;">
    </div>

    <h2>animation-direction: alternate</h2>
    <div class="ball"
         style="animation-direction: alternate;">
    </div>

    <h2>animation-direction: alternate-reverse</h2>
    <div class="ball"
         style="animation-direction: alternate-reverse;">
    </div>
</body>
</html>

Animation Timing Function

在 CSS 中， * animation-timing-function* 属性用于定义动画的速度曲线。它可以采用以下值。

ease: 动画从慢开始，然后快，最后慢结束（默认值）。
linear: 动画从开始到结束以相同的速度播放。
ease-in: 动画从慢开始。
ease-out: 动画从慢结束。
ease-in-out: 动画从慢开始和结束。
cubic-bezier(n,n,n,n): 这样我们可以定义自己的速度值。要了解更多信息，请查看 * Cubic Bezier Function* 文章。

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: relative;
            left:0;

            animation-name: moveRight ;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <h2>linear</h2>
    <div class="ball"
         style="animation-timing-function: linear;">
    </div>

    <h2>ease</h2>
    <div class="ball"
         style="animation-timing-function: ease;">
    </div>

    <h2>ease-in</h2>
    <div class="ball"
         style="animation-timing-function: ease-in;">
    </div>

    <h2>ease-out</h2>
    <div class="ball"
         style="animation-timing-function: ease-out;">
    </div>

    <h2>ease-in-out</h2>
    <div class="ball"
         style="animation-timing-function: ease-in-out;">
    </div>

    <h2>cubic-bezier(0.25, 0.1, 0.25, 1)</h2>
    <div class="ball"
         style="animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);">
    </div>
</body>
</html>

Set Animation Fill Modes

animation-fill-mode* 属性指定动画未播放（在开始之前、结束之后或两者）时目标元素的样式。

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

none: 动画在开始之前或之后不会应用任何样式。这是默认设置。
forwards: 在动画结束时，元素将保持最后一个关键帧规则设置的样式。
backwards: 在动画结束时，元素将保持第一个关键帧规则设置的样式。
both: 动画将遵循前进和后退这两个规则。

查看以下代码的输出，以加深理解：

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            padding: 10px;
            background-color: green;
            color: white;
            font-size: 16px;
            margin: 20px;
            animation-duration: 2s;
            animation-name: changeColor;
        }

        /* Animation Definition */
        @keyframes changeColor {
            0% {
                background-color: blue;
            }
            100% {
                background-color: red ;
            }
        }

        /* Animation Fill Modes */
        .none {
            animation-fill-mode: none;
        }

        .forwards {
            animation-fill-mode: forwards;
        }

        .backwards {
            animation-fill-mode: backwards;
            animation-delay: 2s;
        }

        .both {
            animation-fill-mode: both;
            animation-delay: 2s;
        }
    </style>
</head>

<body>
    <div class="box none">None</div>
    <div class="box forwards">Forwards</div>
    <div class="box backwards">Backwards</div>
    <div class="box both">Both</div>
</body>
</html>

Animation Shorthand Property

在 CSS 中， animation 属性是以下属性的简写

* animation-name:* 设置动画的名称。
* animation-duration:* 设置动画的持续时间。
* animation-timing-function:* 定义动画的速度曲线。
* animation-delay:* 设置动画开始之前的延迟。
* animation-iteration-count:* 设置动画重复的次数。
* animation-direction:* 定义动画执行的方向。
* animation-fill-mode:* 描述运行前和运行后的样式。
* animation-play-state:* 描述动画的播放/暂停性质。

Example

<html lang="en">
<head>
    <style>
    .box {
        padding: 20px;
        background-color: #3498db;
        color: white;
        font-size: 16px;
        /* Name, duration, timing function, delay, repeat, direction, fill mode */
        animation: changeColor 2s ease-in-out 1s infinite alternate both;
    }

    /* Animation Definition */
    @keyframes changeColor {
        0% {
            background-color: #3498db;
        }
        100% {
            background-color: #e74c3c;
        }
    }

    </style>
</head>

<body>
    <div class="box">Animate Me!</div>
</body>
</html>