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

列印頁面