Thực hiện nhiều transition (chuyển tiếp) cùng lúc với CSS3

Thuộc tính transition cho phép animating nhiều thuộc tính cùng lúc, phân cách bằng dấu phẩy.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <style>
    .container div {
      width: 300px;
      height: 100px;
      border-radius: 1px;
      background: rgb(25, 0, 255);
      border: 2px solid red;
      transition: width 2s, border-radius 2s;
    }
    .container:hover div {
      width: 100px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <h1>Ví dụ Multiple Transitions</h1>
  <div class="container">
    <div></div>
  </div>
  <h2> Di chuột vào hộp trên để thu nhỏ chiều rộng và biến thành tròn </h2>
</body>
</html>

Kết quả

Khi hover: hộp xanh từ rộng 300px thu nhỏ thành 100px, đồng thời bo góc từ 1px thành 50% (tròn tròn) - cả hai diễn ra trong 2 giây.

Cú pháp đầy đủ

transition: property duration timing-function delay;
/* Ví dụ nhiều thuộc tính: */
transition: width 2s ease 0.5s, height 1s linear, background 0.3s;

Lưu ý

• Chỉ transition được các thuộc tính có giá trị số (width, height, color, transform, opacity...)
• Không transition được display, visibility (trừ opacity)
• Dùng transition: all 0.3s ease để áp dụng cho tất cả thuộc tính thay đổi