53. Transition trong CSS

Transition trong CSS, transition là một cách để tạo hiệu ứng mượt mà khi các thuộc tính của phần tử thay đổi. Bằng cách sử dụng transition, bạn có thể điều chỉnh tốc độ và kiểu chuyển đổi khi các thuộc tính thay đổi giá trị. Dưới đây là ví dụ về cách sử dụng transition trong CSS:

css

.transition-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.transition-box:hover {
  width: 150px;
  background-color: red;
}

Trong ví dụ này, chúng ta có một hộp có thuộc tính transition được áp dụng. Khi bạn di chuột qua hộp, chiều rộng và màu nền của nó sẽ chuyển đổi mượt mà trong vòng 0.5 giây với kiểu chuyển đổi “ease-in-out”.

Để giải thích ví dụ này:

• transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; khai báo hiệu ứng chuyển đổi. Nó nói rằng khi thuộc tính width hoặc background-color thay đổi, chúng sẽ có hiệu ứng chuyển đổi trong 0.5 giây với kiểu chuyển đổi ease-in-out.
• :hover là một pseudo-class mà CSS sử dụng để áp dụng các quy tắc khi phần tử được hover bởi chuột.
• Trong quy tắc :hover, chúng ta đã thay đổi giá trị của width và background-color, và transition sẽ tự động tạo hiệu ứng chuyển đổi mượt mà khi chúng thay đổi.

Lưu ý rằng transition có thể được sử dụng để chuyển đổi giữa nhiều thuộc tính khác nhau và điều chỉnh thời gian và kiểu chuyển đổi theo ý muốn