CSS Transitions là gì?

Với hiệu ứng chuyển tiếp, bạn có thể dễ dàng thay đổi các giá trị thuộc tính. Bạn cũng có thể đặt một khoảng thời gian.

Hãy thử thay đổi chiều cao của một phần tử:

Ví dụ

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