Lewati ke konten
🛠️ToolsShed

Generator Timing Animasi

Generator timing animasi CSS (cubic-bezier) dengan pratinjau kurva visual.

Preset

Kustom

Pratinjau

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Tentang alat ini

Pembuat waktu animasi adalah alat penting bagi desainer web dan pengembang yang ingin membuat animasi dan transisi yang halus dan terasa alami. Ini menghasilkan fungsi waktu kurva kubik Bézier, yang mengontrol bagaimana animasi berkembang dari waktu ke waktu, dari saat dimulai hingga selesai. Daripada menggunakan preset easing generik, alat ini memungkinkan Anda memvisualisasikan dan menyesuaikan kurva pasti dari akselerasi dan deselerasi animasi Anda.

Untuk menggunakan pembuat ini, sesuaikan titik kontrol pada pratinjau kurva interaktif untuk membentuk fungsi waktu Anda persis seperti yang Anda butuhkan. Anda dapat melihat kode kurva kubik Bézier yang dihasilkan secara real-time dan menyalinnya langsung ke transisi dan animasi CSS Anda. Baik Anda merancang efek hover tombol, transisi halaman, atau micro-animasi untuk spinner pemuatan, umpan balik kurva visual membantu Anda mendapatkan waktu yang tepat pada percobaan pertama.

Kasus penggunaan umum mencakup membuat efek easing untuk interaksi antarmuka pengguna, memastikan animasi terasa responsif dan halus, dan mencocokkan waktu animasi di berbagai alat desain. Memahami bagaimana waktu kurva kubik Bézier berfungsi akan membantu Anda melampaui preset linear atau ease-in-out default dan membuat animasi yang terasa disesuaikan dengan bahasa gerakan merek Anda.

Pertanyaan yang Sering Diajukan

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.