Cách tạo hiệu ứng chuyển tiếp (transition) với CSS?

Để tạo hiệu ứng chuyển tiếp, hãy đặt thuộc tính cho hiệu ứng chuyển tiếp. Cùng với đó, hãy đặt thời gian của hiệu ứng.

transition: height 5s;

Bạn có thể chạy mã sau để tạo hiệu ứng chuyển tiếp:

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: blue;
        transition: width 3s;
      }
      div:hover {
        width: 250px;
      }
    </style>
  </head>
  <body>
    <h1>Tiêu đề Một</h1>
    <p>Di chuột qua hộp dưới để thay đổi chiều rộng.</p>
    <div></div>
  </body>
</html>