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

  Bài viết hay nhất1
Đây là một thuộc tính mình rất hay sử dụng trong thiết kế web, mục đích chính là làm cho trang web trông có vẻ mượt mà hơn và có thể tạo ra những hiệu ứng chuyển động khi bấm, rê chuột vào phần tử.

Demo Online: http://jsfiddle.net/juskteez/CT3E8/

thông thường thì mình sẽ viết như sau để thêm hiệu ứng chuyển động này vào phần tử (đây là cách viết ngắn gọn và dễ dùng nhất):

Code:
transition: all 1s ease;

Nhưng đầy đủ thì sẽ phải viết như sau (đây là cách dễ sửa và dễ hiểu nhất):

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

Để mình mô tả từng phần cho các bạn hiểu!

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,...

Để áp dụng cho các thuộc tính đơn lẻ thì dùng cách ngắn gọn, mỗi giá trị cho thuộc tính riêng cách nhau bằng dấu phẩy. VD:

Code:
transition: margin 1s linear, opacity 0.5s ease-in-out, background 3s ease;
You cannot reply to topics in this forum