Skip to content

Màu sắc & Thiết kế

Trình chỉnh sửa Cubic Bezier

Trình chỉnh sửa cubic-bezier miễn phí. Thiết kế các đường cong easing CSS trực quan với công cụ kéo, cài đặt trước và xem trước hoạt ảnh trực tiếp. Sao chép CSS cho chuyển tiếp và hoạt ảnh.

Runs in your browser

Cubic-bezier editor

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);
css

Ghi chú của biên tập viên

Understanding · Time, but with feeling.

Chương phân tích chuyên sâu này hiện chỉ có sẵn bằng tiếng Anh. Công cụ chuyển đổi ở trên hoạt động bằng ngôn ngữ của bạn; bài viết giải thích dài chưa được dịch.

Các câu hỏi thường gặp

Quick answers.

What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

Is the editor free?

Yes — fully free, no signup.

Mọi người cũng tìm kiếm

Công cụ liên quan

More in this room.

Xem tất cả trong Màu sắc & Thiết kế