Tidadigi Logo

CSS animation-iteration-count Property

Thuộc tính animation-iteration-count trong CSS chỉ định số lần lặp lại của một animation. Nó cũng có thể đặt thành infinite để lặp lại vô hạn.

Cú pháp

animation-iteration-count: number | infinite | initial | inherit;

Giá trị thuộc tính

  • number: Chỉ định số lần animation sẽ được phát. Giá trị mặc định là 1.
  • infinite: Animation sẽ lặp lại vô hạn.
  • initial: Đặt thuộc tính về giá trị mặc định ban đầu.
  • inherit: Kế thừa thuộc tính từ phần tử cha của nó.

Ví dụ: Chương trình HTML minh họa animation-iteration-count.

html 
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | animation-iteration-count Property
    </title>
    <style>
        .geeks {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
            font-family: Times New Roman;
        }

        .geeks1 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
            font-family: Times New Roman;
        }

        #one {
            animation-name: example;
            animation-duration: 2s;

            /* Animation will be repeated twice */
            animation-iteration-count: 2;
        }

        #two {
            animation-name: example;
            animation-duration: 2s;

            /* Animation will be repeated infinitely */
            animation-iteration-count: infinite;
        }

        @keyframes example {
            from {
                background-color: orange;
            }

            to {
                background-color: white;
            }
        }
    </style>
</head>

<body>
    <div class="geeks">
        GeeksforGeeks
    </div>

    <div class="geeks1">
        A computer science portal for geeks
    </div>

    <!-- Animation of the text inside the h2 tag
            below will be repeated twice only -->
    <h2 id="one">
        This text changes its color two times.
    </h2>

    <!-- Animation of the text inside the h2 tag
            below will be repeated infinitely -->
    <h2 id="two">
        This text changes its color infinite times.
    </h2>
</body>
  
</html>

Đầu ra:

css-animation-iteration-count-property

Các phương pháp hay nhất để sử dụng Animation-Iteration-Count:

  • Tránh lạm dụng: Lặp lại quá mức có thể gây mất tập trung cho người dùng.
  • Cân nhắc hiệu suất: Kiểm tra animation trên nhiều thiết bị để đảm bảo hiệu suất mượt mà.
  • Nâng cao trải nghiệm người dùng: Dùng animation để giao diện hấp dẫn hơn, nhưng không làm người dùng choáng ngợp.

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

  • Google Chrome 43.0 trở lên
  • Edge 12.0 trở lên
  • Firefox 16.0 trở lên
  • Opera 30.0 trở lên
  • Safari 9.0 trở lên

Last Updated : 21/07/2025