Tidadigi Logo

CSS animation-duration Property

Thuộc tính animation-duration trong CSS rất quan trọng để kiểm soát thời gian hoàn thành một chu kỳ animation. Nó là công cụ cần thiết để tạo ra thiết kế web hấp dẫn.

Cú pháp:

animation-duration: time | initial | inherit;

Giá trị thuộc tính:

  • time: Giá trị này chỉ định thời gian animation sẽ hoàn thành một chu kỳ. Bạn có thể chỉ định bằng giây hoặc mili giây. Giá trị mặc định là 0, nghĩa là animation sẽ không xảy ra.
  • initial: Giá trị này được sử dụng để đặt thuộc tính về giá trị mặc định ban đầu.
  • inherit: Giá trị này được dùng để kế thừa thuộc tính từ phần tử cha.

Ví dụ: Đoạn code HTML minh họa thuộc tính animation-duration trong CSS.

html 
<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS | animation-duration Property</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #gfg1 {
            animation: text 5s infinite;
            text-align: center;
        }

        #geek1 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #009688;
            margin-bottom: 0.5rem;
            padding: 10px;
            background-color: #e0f2f1;
            border-radius: 8px;
        }

        #geek2 {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
        }

        @keyframes text {
            from {
                transform: translateY(100px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div id="gfg1">
        <div id="geek1">
            GeeksforGeeks
        </div>
        <div id="geek2">
            A computer science portal for geeks
        </div>
    </div>
</body>
  
</html>

Output: 

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

  • Giữ cho animation tinh tế: Tránh animation quá dài có thể gây mất tập trung cho người dùng.
  • Cân nhắc về hiệu suất: Kiểm tra animation trên các thiết bị khác nhau để đảm bảo mượt mà.
  • Trải nghiệm người dùng: Sử dụng animation để nâng cao trải nghiệm người dùng. Không nên làm quá tải giao diện.

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

  • 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