Các hiệu ứng chuyển tiếp và hoạt ảnh của CSS3 hỗ trợ việc nới lỏng, chính thức được gọi là "chức năng định thời". Những cái phổ biến được ease-in, ease-out, ease-in-out, ease, và linear, hoặc bạn có thể chỉ định của riêng bạn sử dụng cubic-bezier().
ease-in sẽ bắt đầu hoạt ảnh từ từ và kết thúc ở tốc độ tối đa.ease-out sẽ bắt đầu hoạt ảnh ở tốc độ tối đa, sau đó kết thúc chậm.ease-in-out sẽ bắt đầu chậm, nhanh nhất ở giữa hoạt ảnh, sau đó kết thúc chậm.easegiống như ease-in-out, ngoại trừ nó bắt đầu nhanh hơn một chút so với kết thúc.linear không sử dụng nới lỏng.- Cuối cùng, đây là một mô tả tuyệt vời về
cubic-beziercú pháp, nhưng nó thường không cần thiết trừ khi bạn muốn một số hiệu ứng rất chính xác.
Về cơ bản, nới lỏng là để dừng lại, nới lỏng là để tăng tốc từ từ, và tuyến tính là không. Bạn có thể tìm các tài nguyên chi tiết hơn tại tài liệu timing-functionvề MDN .
Và nếu bạn muốn những ảnh hưởng chính xác nói trên, chức năng bất ngờ Lea Verou của cubic-bezier.com là có dành cho bạn! Nó cũng hữu ích để so sánh các chức năng thời gian khác nhau bằng đồ thị.
Khác, các steps()chức năng thời gian , hoạt động như linear, nhưng chỉ thực hiện một số hữu hạn các bước giữa đầu của quá trình chuyển đổi và kết thúc của nó. steps()hữu ích nhất đối với tôi trong hoạt ảnh CSS3, hơn là trong quá trình chuyển đổi; một ví dụ điển hình là tải các chỉ báo có dấu chấm. Theo truyền thống, người ta sử dụng một loạt các hình ảnh tĩnh (tám chấm, hai màu thay đổi mỗi khung) để tạo ra ảo giác chuyển động. Với steps(8)hoạt ảnh và rotatechuyển đổi, bạn đang sử dụng chuyển động để tạo ra ảo ảnh về các khung hình riêng biệt! Thật là vui.