Trình Chỉnh Sửa CSS Cubic Bezier

cubic-bezier(x1, y1, x2, y2) là một hàm CSS xác định một đường cong thời gian tùy chỉnh cho các chuyển tiếp và hoạt ảnh. Bốn giá trị điều khiển hai điểm xử lý định hình cách hoạt ảnh tăng tốc và giảm tốc trong suốt thời lượng của nó.

Các giá trị đại diện cho hai điểm điều khiển: P1 (x1, y1) và P2 (x2, y2). Các giá trị X đại diện cho thời gian (0 = bắt đầu, 1 = kết thúc) và phải ở giữa 0 và 1. Các giá trị Y đại diện cho tiến trình và có thể vượt quá phạm vi 0–1 để có hiệu ứng overshoot.

Các phương trình easing của Robert Penner là một bộ đường cong toán học tiêu chuẩn được sử dụng rộng rãi trong hoạt ảnh. Mỗi họ (Sine, Quad, Cubic, v.v.) có ba biến thể:

• In — khởi động chậm, kết thúc nhanh
• Out — khởi động nhanh, kết thúc chậm
• InOut — khởi động và kết thúc chậm, giữa nhanh

Trình chỉnh sửa này cung cấp các xấp xỉ cubic-bezier của những đường cong này.

Có. Các giá trị Y dưới 0 làm cho hoạt ảnh tạm thời đi ngược lại, trong khi các giá trị trên 1 làm cho nó vượt quá mục tiêu. Điều này tạo ra các hiệu ứng nảy và giống như lò xo. Họ easing Back sử dụng điều này cho overshoot đặc trưng của nó.

linear di chuyển với tốc độ không đổi từ đầu đến cuối. ease khởi động chậm, tăng tốc ở giữa, và giảm tốc ở cuối — điều này cảm thấy tự nhiên hơn đối với mắt con người.

Sao chép đầu ra CSS và áp dụng nó cho các chuyển tiếp hoặc hoạt ảnh của bạn:

.element {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.element {
  animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}