Css 简明教程

CSS - Animations

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

CSS animations allows to create smooth transitions between different styles without using JavaScript. For example,

What is CSS Animation?

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

In CSS we can dynamically change styles of elements based on time duration, user interaction or state changes called CSS animations. It is implemented using the @keyframes rule to create the animation and the animation property to apply it to an element.

The @keyframes Rule

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

The @keyframes rule is used to define keyframes for animation specifying how the animated element look at various stage of animation. Consider following code that defines a keyframe rule.

.box{
    animation: colorChange 5s infinite;
}

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

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

This code will define animation for element with class .box, the name of animation is colorChange, run for 5 seconds and it repeats infinite number of times.

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

The keyframe rule is defined for animation named colorChange.

At 0% of total duration of animation( ie, 0 seconds) the background color will be red.
At 50% of total time( ie, 2.5 seconds) the background color changes to green.
At 100% of total duration( ie, 5 seconds) color changes to blue.

Animation Delay Property

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

We can set delay for starting an animation using animation-delay property. Check out following example

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

You can also set negative value for animation-delay properties. If you are using a negative value -n, then the animation will start as if it had already been playing for n seconds.

Example

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

In this example ball will start to move left after 2 seconds.

<!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* 属性设置动画重复自己的次数。

We can set number of times a animation should repeats itself using animation-iteration-count property.

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

The CSS specification does not support negative values for this property. It can take value as a positive integer (e.g., 1, 2, 3, etc.) or keyword 'infinite'

Example

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

In this example we set ball iteration count to infinite.

<!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 属性来指定动画运行的方向。 *

We can specify the direction in which animation should run using * animation-direction property. *

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

Following are the valid values for animation-direction property

normal: The animation is played as normal (forwards). This is default.
reverse: The animation is played in reverse direction (backwards).
alternate: The animation is played forwards first, then backwards.
alternate-reverse: The animation is played backwards first, then forwards.

Example

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

In this example we used inline css to set animation direction property.

<!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* 属性用于定义动画的速度曲线。它可以采用以下值。

In CSS, the animation-timing-function property is used to define speed curve of animation. It can take following values.

ease: The animation will start slow, then fast, then end slowly (The default value).
linear: Animation with the same speed from start to end.
ease-in: Animation with a slow start.
ease-out: Animation with a slow end.
ease-in-out: Animation with a slow start and end.
cubic-bezier(n,n,n,n): This lets us to define our own values for speed. To know more check out Cubic Bezier Function article.

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* 属性指定动画未播放（在开始之前、结束之后或两者）时目标元素的样式。

The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).

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

The animation-fill-mode property can have the following values:

none: The animation will not apply any style before or after it starts. This is default.
forwards: At end of animation element will keep the style set by the last keyframe rule.
backwards: At end of animation element will keep the style set by the first keyframe rule.
both: The animation will follow the rules for both forwards and backwards.

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

Check out output of following code for more understanding:

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 属性是以下属性的简写

In CSS, the animation property is shorthand for following properties

animation-name: Sets name for animation.
animation-duration: Sets duration of animation.
animation-timing-function: Define speed curve of animation.
animation-delay: Sets delay before which animation starts.
animation-iteration-count: Sets number of time animation repeats.
animation-direction: Defines direction of execution of animation.
animation-fill-mode: Describes the pre-run and post-run styling.
animation-play-state: Describes play/pause nature of animation.

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>

List of CSS Animation Properties

以下是 animation 属性的子属性：

The following are the animation property’s sub-properties:

Property

Description

Example

animation-composition

Indicates the composite operation to apply when many animations are having simultaneous effects on the same property.

Try It

animation-delay

Indicates whether the animation should begin at the beginning of the animation or somewhere along the way, as well as the amount of time that should pass between an element loading and the start of an animation sequence.

Try It

animation-direction

Indicates if the initial iteration of animation should be forward or backward and if iterations after that should continue in the same direction or change direction each time the sequence is executed.

Try It

animation-duration

Indicates how long it takes for an animation to finish one cycle.

Try It

animation-fill-mode

Describes the pre-run and post-run styling that an animation applies to its target.

Try It

animation-iteration-count

Indicates how many times an animation should recur.

Try It

animation-name

It gives the name of the @keyframes at-rule that describes the keyframes of an animation.