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…

Đọc thêm:   Sign In/Up Form Transitions cực cool với CSS3