Hãy đặt thời lượng ngắn hơn bạn nghĩ
- Một transition đơn lẻ nên trong khoảng 0,15~0,4 giây
- Hãy tăng tốc cho đến khi bạn cảm thấy nó quá nhanh, rồi giảm dần lại một chút
Hãy khớp hành động với đường cong
- Chuyển động cũng mang tính chủ quan như màu sắc, nhưng quan trọng không kém
- Hãy nghĩ về chuyển động trong thế giới thực và so sánh
Tăng tốc và giảm tốc
- Nếu animation trông thiếu tự nhiên, thường là vì nó bắt đầu hoặc kết thúc quá đột ngột
- Dù rất nhỏ, vẫn nên thêm easing-in/out vào đường cong cubic-bezier
- Để trông chân thực hơn, có thể thêm cả "quán tính (Inertia)"
Càng ít càng tốt
- Càng nhiều thay đổi xảy ra trên một phần tử trong lúc animation, nguy cơ trông quá đà càng lớn
- Nếu opacity chuyển từ 0 lên 1, hãy thử 0,4 thay vì 1. Nếu thay đổi kích thước, hãy thử bắt đầu từ kích thước chỉ nhỏ hơn một chút
- Trong đa số trường hợp, animation đưa phần tử về đúng vị trí của nó chỉ nên di chuyển trong khoảng 5~40 pixel
Hãy tránh các giá trị mặc định của trình duyệt
- Trình duyệt có sẵn các đường cong như linear, ease, ease-in, ease-out, ease-in-out
- Chúng tiện và hữu ích trong một số tình huống, nhưng quá phổ biến nên mọi thứ trông giống nhau (giống như các website làm bằng Bootstrap/Tailwind thường na ná nhau)
- Hãy thử dùng các giá trị tự động hoàn thành cho đường cong cubic-bezier trong VS Code
- Hoặc mở công cụ dành cho nhà phát triển của trình duyệt và thử dùng trình chỉnh sửa đường cong
Nhiều thuộc tính, nhiều easing
- Không phải lúc nào cũng hữu ích, nhưng khi cần thay đổi nhiều thuộc tính cùng lúc (ví dụ transform và opacity)
- Có lúc áp dụng cùng một đường cong cubic-bezier vẫn ổn, nhưng thực tế không phải lúc nào cũng vậy
- Một đường cong chạy tốt với transform có thể lại không hợp với fade
- Khi đó, nên chọn easing khác nhau cho từng thuộc tính CSS
- Có thể tách @keyframes animation theo từng thuộc tính, hoặc dùng nhiều transition
- Với opacity dùng linear, với transform dùng cubic-bezier(.5, 0, .5, 1)
Dùng độ trễ lệch nhau
- Khi transition nhiều phần tử, đừng đánh giá thấp hiệu quả của animation-delay hoặc transition-delay
In đi ra, Out đi vào
- Có ba loại đường cong easing
- ease in (bắt đầu chậm)
- ease out (kết thúc chậm)
- in-out (chỉ nhanh ở giữa, chậm ở đầu và cuối)
- Điểm khó của transition là đôi khi bạn muốn phần in dùng ease-out, còn phần out lại dùng ease-in
- Animation một phần tử đi ra và phần tử khác đi vào nhìn từ phía người dùng là một lần chuyển đổi, nhưng bên trong thực ra là hai transition
- Phần đi ra nên chậm dần, nên cần ease-in; còn phần đi vào nên dùng ease-out
Hãy dựa vào tăng tốc phần cứng
- Không phải mọi thuộc tính CSS đều chạy mượt trên mọi thiết bị và trình duyệt
- Các thuộc tính luôn có thể được tăng tốc phần cứng
- transform (mọi translate, scale, rotate và cả các phiên bản 3D)
- opacity
- Các thuộc tính có thể được tăng tốc phần cứng trong một số trường hợp
- Một số thuộc tính SVG nhất định
- filter (tùy trình duyệt và loại filter)
- Canvas và WebGL cũng được tăng tốc phần cứng, nhưng không bàn ở đây
- Nghĩa là, nếu muốn di chuyển, đổi kích thước hoặc xoay, hãy luôn dùng thuộc tính CSS
transform
- Dù làm gì cũng đừng thay đổi trực tiếp kích thước hoặc vị trí của phần tử
- Nếu thay đổi trực tiếp các thuộc tính ảnh hưởng tới layout trang như height, width, border, margin, padding, có nguy cơ tốc độ trang sẽ chậm đi thấy rõ
Dùng will-change khi cần
- Về lý thuyết animation phải mượt và hiệu năng tốt, nhưng nếu vẫn trông giật hoặc thiếu tự nhiên, hãy dùng thuộc tính will-change
- Vì nó báo trước điều gì sẽ thay đổi, trình duyệt có thể bỏ qua một số phép tính khác
Bonus: tôn trọng tùy chọn của người dùng
- Người dùng có thể chỉ định trong thiết lập thiết bị rằng họ muốn "reduced motion"
- Có thể nhận biết giá trị này bằng media query hoặc qua JavaScript, rồi phản hồi phù hợp
Chưa có bình luận nào.