Tidadigi Logo

CSS transition Property

Thuộc tính CSStransition-property xác định thuộc tính nào sẽ có hiệu ứng chuyển đổi. Nó cho phép tạo hiệu ứng mượt mà khi các thuộc tính thay đổi. Bạn có thể làm điều này mà không cần thay đổi layout hoặc JavaScript.

Thuộc tính này là sự kết hợp của bốn thuộc tính con sau:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Lưu ý: Hiệu ứng chuyển đổi có thể được định nghĩa ở hai trạng thái (hover và active). Bạn có thể dùng pseudo-classes như hover hoặc :active hoặc classes được thiết lập bằng JavaScript.

Cú pháp

selector {
    transition: <transition-property> 
                <transition-duration> 
                <transition-timing-function> 
                <transition-delay>;
}

Lưu ý: Nếu bất kỳ giá trị nào không được xác định, trình duyệt sẽ dùng các giá trị mặc định.

Giá trị thuộc tính

Thuộc tínhMô tả
transition-propertyChỉ định thuộc tính CSS mà hiệu ứng chuyển đổi sẽ được áp dụng.
transition-durationChỉ định khoảng thời gian một hiệu ứng chuyển đổi hoàn thành.
transition-timing-functionXác định đường cong tốc độ của hiệu ứng chuyển đổi.
transition-delayChỉ định độ trễ trước khi hiệu ứng chuyển đổi bắt đầu.

Ví dụ 1: Chuyển đổi màu nền

Ví dụ này tạo ra một hộp màu xanh lam, chuyển sang màu xanh lá cây khi di chuột qua. Nó sử dụng thuộc tính CSS transition để tạo hiệu ứng cho sự thay đổi màu trong 0.5 giây. Hàm thời gian là ease.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>CSS Transition Example </title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 0.5s ease;
        }

        .box:hover {
            background-color: green;
        }
    </style>
</head>

<body>
    <h2>Css transition property</h2>
    <div class="box"></div>
</body>

</html>

Đầu ra:

css-transition-property
CSS transition Property Example Output

Ví dụ 2: Chuyển đổi chiều rộng và chiều cao

Ví dụ này minh họa cách dùng thuộc tính transition để thay đổi chiều rộng và chiều cao.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>CSS Transition property </title>
    <style>
        .rectangle {
            width: 100px;
            height: 50px;
            background-color: red;
            transition: width 0.3s ease, height 0.3s ease;
        }

        .rectangle:hover {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <h2>CSS transition property</h2>
    <div class="rectangle">
        <p>Width and Height Transition</p>
    </div>
</body>

</html>

Đầu ra:

css-transition-property
CSS transition Property Example Output

Trình duyệt được hỗ trợ

Các trình duyệt được hỗ trợ bởi thuộc tínhtransition được liệt kê dưới đây:


Last Updated : 21/07/2025