Giới thiệu thuộc tính transition tạo hiệu ứng khi rê chuột cho đối tượng web

Transition là hiệu ứng CSS dùng làm đẹp website, giúp website trở nên chuyên nghiệp hơn khi rê chuột vào 1 phần tử nào đó trong website.

Transition làm được gì?

Sử dụng CSS transition hover, khi trỏ chuột vào:

• Các khối icon sẽ đổi sang màu khác.
• Vị trị khối rê chuột vào sẽ thay đổi vị trí tùy ý.
• Hiệu ứng hover sẽ diễn ra nhanh hoặc chậm.

Thuộc tính cơ bản của transition

• transition: 0.4s Thay đổi tốc độ, thời gian của hiệu ứng hover bằng thuộc tính transition: 0.4s (0.4s là thời gian – 0.4 giây).
• transiton-deplay: 0.4s thời gian, Xác định thời gian chờ đợi trước khi các hiệu ứng của quá trình chuyển đổi sẽ bắt đầu.
• transition-property: width, height Xác định quá trình chuyển đổi cho các thuộc tính CSS.
• transition-duration: thời gian Quá trình chuyển đổi mất bao nhiêu thời gian.

transition-timing-function: ease, ease-in, linear, ease-out-ease-in-out Xác định tiến trình hiệu ứng. Ví dụ, lúc đầu chậm, lúc sau nhanh…