Tidadigi Logo

CSS animation-play-state Property

Thuộc tính animation-play-state trong CSS điều khiển việc phát lại animation. paused dừng, running bắt đầu, initial đặt lại về mặc định, inherit kế thừa từ phần tử cha.

Syntax

animation-play-state: paused|running|initial|inherit;

Property Value

Các giá trị của thuộc tính animation-play-state được liệt kê dưới đây:

ValueDescription
pausedChỉ định rằng animation bị tạm dừng.
runningGiá trị mặc định chỉ định animation đang chạy.
initialĐặt thuộc tính animation về giá trị mặc định của nó.
inheritKế thừa thuộc tính animation từ phần tử cha.

Example: Running Animation

Trong ví dụ này, ta minh họa animation đang chạy. Sử dụng thuộc tính animation-play-state, làm cho hình vuông xanh di chuyển liên tục từ trái sang phải.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS animation-play-state Property - Running Animation</title>
    <style>
        body {
            text-align: center;
            width: 70%;
        }

        h1 {
            color: green;
        }

        .running {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: mymove 5s linear infinite;
            /* Webkit prefix */
            animation: mymove 5s linear infinite;
            animation-play-state: running;
            /* Animation is running */
        }

        @keyframes mymove {
            from {
                left: 0%;
            }

            to {
                left: 80%;
            }
        }
    </style>
</head>

<body>
    <h2>animation-play-state property - Running Animation</h2>
    <div class="running"></div>
</body>

</html>

Output:

css-animation-play-state-property
CSS animation-play-state Property - Running Animation Example Output

Example: Paused Animation

Trong ví dụ này, chúng ta minh họa một animation tạm dừng. Sử dụng thuộc tính animation-play-state, dừng chuyển động của hình vuông xanh trên màn hình.

html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>
      CSS animation-play-state Property - Paused Animation
    </title>
    <style>
        .paused {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: mymove 5s linear infinite;
            /* Webkit prefix */
            animation: mymove 5s linear infinite;
            animation-play-state: paused;
            /* Animation is paused */
        }

        @keyframes mymove {
            from {
                left: 0%;
            }

            to {
                left: 80%;
            }
        }
    </style>
</head>

<body>
    <h2>
      animation-play-state property - Paused Animation
    </h2>
    <div class="paused"></div>
</body>

</html>

Output: 

css-animation-play-state-property
CSS animation-play-state Property - Paused Animation Example Output

Supported Browser

Các trình duyệt được hỗ trợ bởi animation-play-state property được liệt kê dưới đây:


Last Updated : 21/07/2025