Apa easing default di CSS?

Transisi dan animasi secara default memakai ease, yang setara dengan cubic-bezier(0.25, 0.1, 0.25, 1): mulai cepat dan berakhir perlahan.

Bagaimana cara membuat efek melampaui target atau memantul?

Seret titik kendali ke atas 1 atau ke bawah 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), melewati titik akhir lalu kembali. Satu kurva Bézier kubik tidak bisa memantul beberapa kali; gunakan keyframes atau fungsi linear() untuk itu.

Apakah nilai yang sama bisa dipakai untuk animasi?

Bisa. Nilai ini berfungsi di transition-timing-function, animation-timing-function, dan opsi easing pada Web Animations API.

Pembuat Cubic Bezier

Bentuk kurva easing CSS dengan menyeret dua titik kendali. Bandingkan gerakannya dengan timing linear, lalu salin cubic-bezier() untuk transisi atau Tailwind.

Editor kurva

Seret salah satu titik kendali. Garis putus-putus adalah timing linear.

Pratinjau gerakan

Kurva Anda

Linear

Posisi di setiap sepersepuluh durasi

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Semua data tetap di browser Anda.

Referensi format

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Halaman alat diperbarui: 2026-10-25

Editor kurva

Pratinjau gerakan

Panduan dan contoh

Alat terkait

Referensi format