Tidadigi Logo

CSS @keyframes Rule

CSS @keyframes rule định nghĩa các animation bằng cách chỉ định keyframes. Nó mô tả các style được áp dụng tại nhiều thời điểm trong animation. Nó cho phép chuyển đổi mượt mà các phần tử web thông qua phần trăm. Các giá trị từ-đến cũng được dùng để điều khiển sự chuyển đổi này.

Lưu ý: Để hỗ trợ trình duyệt tối ưu hãy luôn thêm cả 0% và 100% vào animation.

Syntax:

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

Property value:

Tham số này chấp nhận ba giá trị được đề cập ở trên và mô tả dưới đây:

TermDescription
animation-nameChỉ định tên của animation được dùng để tham chiếu trong thuộc tính animation.
keyframes-selectorChỉ ra phần trăm của chuỗi animation (ví dụ: 0% 50% 100%). Nó có thể được định nghĩa bằng from (tương đương 0%) và to (tương đương 100%).
css-stylesChỉ định một hoặc nhiều thuộc tính CSS style hợp lệ để áp dụng tại mỗi keyframe.

Basic Usage Examples

Example 1: Basic Animation Using @keyframes

Ví dụ này minh họa cách tạo animation cho màu nền của một div từ đỏ sang xanh.

HTML 
<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: white;
            text-align: center;
        }

        div {
            background: green;
            position: relative;
            animation: gfg 10s infinite;
        }

        /* keyframe CSS style */
        @keyframes gfg {
            0% {
                top: 0px;
                width: 00px;
            }

            25% {
                top: 50px;
                background: LawnGreen;
                width: 50px;
            }

            50% {
                top: 100px;
                background: LightGreen;
                width: 100px;
            }

            75% {
                top: 150px;
                background: MediumSeaGreen;
                width: 150px;
            }

            100% {
                top: 200px;
                color: white;
                background: Green;
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>

</html>

Output:

Example 2: Using Multiple Keyframes

Bạn có thể định nghĩa nhiều keyframes để tạo các animation phức tạp hơn.

HTML 
<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: white;
            text-align: center;
        }

        div {
            background: green;
            position: relative;
            animation: gfg 7s infinite;
        }

        @keyframes gfg {
            0% {
                top: 0px;
                width: 0px;
            }

            25% {
                top: 50px !important;
                background: LawnGreen;
            }

            50% {
                top: 100px !important;
                background: LightGreen;
            }

            100% {
                top: 200px !important;
                color: white;
                background: Green;
                width: 210px;
            }
        }
    </style>
</head>

<body>
    <center>
        <div>
            <h1>GeeksforGeeks</h1>
        </div>
    </center>
</body>

</html>

Output:

Supported Browsers:

Các trình duyệt được hỗ trợ bởi @keyframes Rule được liệt kê bên dưới:


Last Updated : 21/07/2025