CSS - animation-play-state 属性

CSS 的 **animation-play-state** 属性用于指定动画是否正在运行。您可以将此属性与 JavaScript 的 onclick() 函数一起使用，以触发属性更改状态。

语法

animation-play-state: running | paused| inital| inherit

属性值

值	描述
paused	指定动画已暂停。
running	指定动画正在播放。这是默认值。
initial	将属性设置为其初始值。
inherit	从父元素继承属性。

动画播放状态属性示例

以下是 **animation-play-state** 属性的一些示例说明。

运行状态动画

为了使动画播放，我们将 running 值赋给 **animation-play-state** 属性。

在下面的示例中，animation-play-state 已设置为 running，因此球不断改变其大小。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 250px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .circle-demo {
            width: 100px;
            height: 100px;
            background-color: #ff6347;
            border-radius: 50%;
            animation-name: pulse;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-play-state: running;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.8);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="circle-demo"></div>
</body>

</html>

暂停状态动画

为了不让动画播放，我们将 paused 值赋给 **animation-play-state** 属性。

在下面的示例中，animation-play-state 已设置为 paused，因此球没有移动。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .circle-demo {
            width: 100px;
            height: 100px;
            background-color: #ff6347;
            border-radius: 50%;
            animation-name: pulse;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-play-state: paused;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.8);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="circle-demo"></div>
</body>

</html>

悬停动画

可以创造性地使用这些值的组合来创建交互式 UI。

在下面的示例中，使用了 running 和 paused 两个值。当鼠标悬停在球上时，设置 running 状态；当鼠标离开球时，设置 paused 状态。

示例

<!DOCTYPE html>
<html>

<head>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 250px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .circle-demo {
            width: 100px;
            height: 100px;
            background-color: #ff6347;
            border-radius: 50%;
            animation-name: pulse;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-play-state: paused;
        }

        .circle-demo:hover {
            animation-play-state: running;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.8);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div class="circle-demo"></div>
</body>

</html>

支持的浏览器

属性
animation-play-state	43.0	10.0	16.0	9.0	30.0

打印页面