CSS - animation-delay 属性

CSS 的 animation-delay 属性用于确定动画开始所需的时间。它以秒或毫秒为单位指定。

正值表示引入时间延迟，而负值表示动画提前开始，并显示指定的持续时间。零表示没有延迟，动画立即开始。

语法

animation-delay: time | initial | inherit;

属性值

值	描述
时间	以秒 (s) 或毫秒 (ms) 为单位指定。可以使用正值和负值。正值引入时间延迟。负值使动画看起来播放了指定的时间。零表示立即播放，也是默认值。这是一个可选字段。
初始	这将属性设置为其初始值。
继承	这从父元素继承属性。

CSS animation-delay 属性示例

下面列出的示例将说明 animation-delay 属性。

为动画设置无延迟

在此示例中，我们考虑一个没有延迟的盒子。该盒子在没有延迟的情况下向前移动。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .animated-box {
            padding: 20px;
            background-color: #edb753;
            color: #fff;
            animation: slideIn;
            animation-duration: 3s;
        }
    </style>
</head>

<body>
    <h3>CSS animation-delay Property</h3>
    <div class="animated-box">
        Animation without Delay
    </div><br>

</html>

为动画设置正时间延迟

在此示例中，我们考虑一个具有正时间延迟的盒子。由于施加的延迟为 2 秒，因此该盒子在 2 秒后开始向前移动。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .animated-box {
            padding: 20px;
            background-color: #edb753;
            color: #fff;
            animation: slideIn;
            animation-duration: 2s;
        }

        .animated-box-delayed {
            animation-delay: 2s;
        }
    </style>
</head>

<body>
    <h3>CSS animation-delay Property</h3>
    <div class="animated-box animated-box-delayed">
        Animation with Postitive Delay
    </div><br>

</html>

为动画设置负时间延迟

在此示例中，我们考虑一个具有负时间延迟的盒子。该盒子看起来已经移动了 1 秒，如指定的那样。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .animated-box {
            padding: 20px;
            background-color: #edb753;
            color: #fff;
            animation: slideIn;
            animation-duration: 4s;
        }

        .animated-box-delayed {
            animation-delay: -1s;
        }
    </style>
</head>

<body>
    <h3>CSS animation-delay Property</h3>
    <div class="animated-box animated-box-delayed">
        Animation with Negative Delay
    </div><br>

</html>

支持的浏览器

属性
animation-delay	43.0	10.0	16.0	9.0	30.0

打印页面