Tidadigi Logo

CSS animation-name Property

Thuộc tính animation-name trong CSS dùng để xác định các animation. Nó được sử dụng để chỉ định tên của @keyframes mô tả animation.

Tìm hiểu về thuộc tính Animation-Name

Thuộc tính animation-name trong CSS dùng để kết nối một phần tử với một tập hợp các keyframe. Các keyframe mô tả trình tự thay đổi của animation.

Cú pháp:

animation-name: keyframename|none|initial|inherit;

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

  • keyframename: Thuộc tính này dùng để chỉ định tên keyframe cần liên kết với selector.
  • none: Đây là giá trị mặc định, chỉ định rằng sẽ không có animation nào cả.
  • initial: Thuộc tính này được dùng để đặt thuộc tính về giá trị mặc định của nó.
  • inherit: Thuộc tính này được dùng để kế thừa thuộc tính này từ phần tử cha.

Ví dụ: Trong ví dụ này, chúng ta sẽ sử dụng thuộc tính đã giải thích ở trên.

html 
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | animation-name Property
    </title>
    <style>
        body {
            text-align: center;
            width: 70%;
        }

        h1 {
            color: green;
        }

        div {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: geeks 5s infinite;
            -webkit-animation-delay: 2s;
            animation: geeks 5s infinite;
            animation-delay: 2s;
        }

        @-webkit-keyframes geeks {
            from {
                left: 0%;
            }

            to {
                left: 80%;
            }
        }

        @keyframes geeks {
            from {
                left: 0px;
            }

            to {
                left: 80%;
            }
        }

        #one {
            animation-direction: alternate-reverse;
            ;
        }

        @keyframes text {
            from {
                margin-left: 60%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>animation-name property</h2>
    <div class="gfg"></div>
</body>
  
</html>

Đầu ra: css-animation-name-propertyTrình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính animation-name đượ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