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

列印頁面