Trình tạo cubic-bezier CSS

Lộ trình tác vụ / từ đầu vào đến kết quả

Cách thiết kế một đường cong easing cubic-bezier

1. 01

   Đặt điểm điều khiển thứ nhất

   Đặt Điều khiển X1 trong khoảng 0 đến 1 và Điều khiển Y1 trong khoảng −1 đến 2. Biểu đồ đường cong vẽ lại trực tiếp, với một đường dẫn chạy từ điểm bắt đầu tới tay cầm của bạn.

2. 02

   Đặt điểm điều khiển thứ hai

   Đặt Điều khiển X2 (0–1) và Điều khiển Y2 (−1 đến 2). Kéo một giá trị Y vượt quá 1 chính là thứ tạo ra độ vượt quá khiến một easing trông đàn hồi; kéo Y1 xuống dưới 0 thêm một khoảnh khắc lấy đà trước khi chuyển động bắt đầu.

3. 03

   Đặt thời lượng

   Chọn Thời lượng từ 0,1 đến 4 giây. Điểm đánh dấu trên rãnh chuyển động chạy lặp qua nó bằng đúng đường cong của bạn, nên nhịp điệu bạn xem chính là nhịp điệu bạn phát hành.

4. 04

   Hoặc bắt đầu từ một đường cong quen thuộc

   Đường cong mặc định — 0.25, 0.1, 0.25, 1 — chính xác là từ khóa ease chuẩn và là một điểm khởi đầu trung lập. Nhấn Tải mẫu để lấy một đường cong vượt quá đàn hồi (0.34, 1.56, 0.64, 1) minh họa tác dụng của giá trị Y lớn hơn 1.

5. 05

   Sao chép CSS nhịp điệu

   Sao chép CSS hoặc Tải .css lưu toolars-cubic-bezier.css. Quy tắc .motion đặt transition-duration và cả hai thuộc tính timing-function. Nó không đặt animation-duration; hãy bổ sung thời lượng riêng cho hoạt ảnh keyframe.

6. 06

   Đọc biểu đồ trước khi phát hành

   Biểu đồ vẽ tiến trình theo thời gian giữa hai điểm đầu và cuối cố định: đoạn phẳng là chậm, đoạn dốc là nhanh. Một đường cong tụt xuống dưới điểm đầu hay vươn qua điểm cuối không phải lỗi — đó là lấy đà và vượt quá, được vẽ một cách trung thực.