CSS - animation-direction 属性

CSS animation-direction 属性指定动画应遵循的方向：向前、向后或在这两个方向之间交替，从而创建来回移动的效果。

使用简写属性 animation 是一种常见且简单的方法，可以一次配置所有动画属性。

语法

animation-direction:normal | reverse | alternate | alternate-reverse

属性值

值	描述
normal	这是默认设置，使用此值，动画将向前进行。
reverse	此值使动画向后进行。
alternate	此值使动画首先向前进行，然后向后进行。
alternate-reverse	此值使动画首先向后进行，然后向前进行。

CSS animation-direction 属性示例

下面列出的示例将使用不同的值说明动画方向属性。

向前运动动画

以下示例演示了值为 normal 的 animation-direction。

在这种情况下，动画正常播放，向前移动。方框开始向右移动。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        /* Styling the container for the boxes */

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        /* Styling for the box with 'normal' animation */

        .normal-box {
            padding: 10%;
            background-color: #3498db;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-name: moveNormal;
            /* Animation moves continuously 
            from start to end */
            animation-direction: normal;

        }

        /* Keyframes for the 'moveNormal' animation */

        @keyframes moveNormal {
            from {
                transform: translateX(0);
            }
            to {
                /* Moves the box horizontally 
                to the right */
                transform: translateX(200px);

            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation direction property </h2>
    <div class="container">
        <div class="normal-box"></div>

    </div>
</body>

</html>

向后运动动画

以下示例演示了值为 reverse 的 animation-direction。

在这种情况下，动画向后移动。此处考虑的方框向后移动。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        /* Styling the container for the boxes */

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        /* Styling for the box with 'reverse' animation */

        .reverse-box {
            padding: 10%;
            background-color: #e74c3c;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-name: moveReverse;
            /* Animation oscillates backwards */
            animation-direction: reverse;
        }

        /* Keyframes for the 'moveReverse' animation */

        @keyframes moveReverse {
            from {
                transform: translateX(0);
            }
            to {
                /* Moves the box back 
                and forth horizontally */
                transform: translateX(200px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Direction Property</h2>
    <div class="container">

        <div class="reverse-box"></div>
    </div>
</body>

</html>

来回运动动画

以下示例演示了值为 alternate 的 animation-direction。

在这种情况下，动画先向前移动，然后向后移动。此处考虑的方框在前一半循环中向前移动，然后在另一半循环中向后移动。

示例

  <!DOCTYPE html>
<html>

<head>
    <style>
        /* Styling the container for the boxes */

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        /* Styling for the box with 
           'alternate' animation */

        .alternate-box {
            padding: 10%;
            background-color: #e74c3c;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-name: moveAlternate;
            /* Animation oscillates back and forth */
            animation-direction: alternate;
        }

        /* Keyframes for the 'moveAlternate' animation */

        @keyframes moveAlternate {
            from {
                transform: translateX(0);
            }
            to {
                /* Moves the box back 
                   and forth horizontally */
                transform: translateX(200px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Direction Property</h2>
    <div class="container">

        <div class="alternate-box"></div>
    </div>
</body>

</html>

往复运动动画

以下示例演示了值为 alternate-reverse 的 animation-direction。

在这种情况下，动画先向后移动，然后开始向前移动。此处考虑的方框先向后移动，然后向前移动。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        /* Styling the container for the boxes */

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        /* Styling for the box with 'alternate' animation */

        .alternate-box {
            padding: 10%;
            background-color: #e74c3c;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-name: moveAlternate;
            /* Animation oscillates back and forth */
            animation-direction: alternate;
        }

        /* Keyframes for the 'moveAlternate' animation */

        @keyframes moveAlternate {
            from {
                transform: translateX(0);
            }
            to {
                /* Moves the box back and
                forth horizontally */
                transform: translateX(200px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Direction Property</h2>
    <div class="container">

        <div class="alternate-box"></div>
    </div>
</body>

</html>

支持的浏览器

属性
animation-direction	43.0	10.0	16.0	9.0	30.0

打印页面