[Tips] Sử dụng hiệu quả thuộc tính transition trong CSS

Code:

transition: all 1s ease;

Code:

transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;

Thuộc tính: transition-property
Mô tả: Dùng để xác định thuộc tính sẽ được áp dụng hiệu ứng chuyển động
Giá trị:
- none: không áp dụng cho thuộc tính nào hết
- all: áp dụng cho tất cả các thuộc tính
- (tên thuộc tính): khỏi giải thích, VD: margin, opacity, background,...

Thuộc tính: transition-duration
Mô tả: Dùng để xác định độ dài của hiệu ứng chuyển động (nhanh hay chậm)
Giá trị: (giây): số giây sẽ diễn ra hiệu ứng, VD: 0.5s, 1s, 2s, 10s,...

Thuộc tính: transition-timing-function
Mô tả: Dùng để xác định cách tính toán hiệu ứng chuyển động, cái này hơi khó hiểu, ví dụ như hiệu ứng diễn ra đều đều hoặc đang nhanh thì chậm,...
Giá trị:
- linear: hiệu ứng diễn ra đều đặn từ đầu đến cuối (giá trị tính toán cubic-bezier(0,0,1,1))
- ease: hiệu ứng sẽ diễn ra từ từ rồi nhanh dần đến cuối thì lại từ từ (giá trị tính toán cubic-bezier(0.25,0.1,0.25,1)) (mặc định là hiệu ứng này)
- ease-in: hiệu ứng diễn ra nhanh dần (giá trị tính toán cubic-bezier(0.42,0,1,1))
- ease-out: hiệu ứng diễn ra chậm dần (giá trị tính toán cubic-bezier(0,0,0.58,1))
- ease-in-out: hiệu ứng diễn ra từ từ rồi bình thường đến cuối thì lại từ từ (giá trị tính toán cubic-bezier(0.42,0,0.58,1))
- cubic-bezier(n,n,n,n): tự tính toán chuyển động của hiệu ứng, giá trị của n là từ 0 đến 1

Thuộc tính: transition-delay
Mô tả: Dùng để xác định độ trễ của hiệu ứng chuyển động (nhanh hay chậm)
Giá trị: (giây): số giây làm trễ hiệu ứng, VD: 0.5s, 1s, 2s, 10s,...

Code:

transition: margin 1s linear, opacity 0.5s ease-in-out, background 3s ease;