Properti transform apa saja yang dapat saya animasikan?

Anda dapat menganimasikan translateX, translateY, scale, dan rotate, serta opacity. Setiap properti diatur secara independen pada titik kunci 0%, 50%, dan 100%.

Fungsi timing apa saja yang tersedia?

Pembuat menyediakan preset ease, linear, ease-in, ease-out, dan ease-in-out, serta opsi cubic-bezier kustom sehingga Anda dapat membuat kurva percepatan unik.

Apakah saya bisa membuat animasi berulang selamanya?

Ya. Atur jumlah pengulangan ke Infinite dan CSS yang dihasilkan akan menggunakan animation-iteration-count: infinite, sehingga animasi akan terus berulang.

Apakah saya perlu mengetahui CSS untuk menggunakan alat ini?

Tidak. Pembuat ini sepenuhnya visual — hanya geser slider dan pilih nilai dari dropdown. CSS dibuat secara otomatis untuk Anda dan siap disalin ke proyek apa pun.

Apakah CSS yang dihasilkan kompatibel dengan semua browser modern?

Ya. Output menggunakan @keyframes standar dan properti singkatan animasi, yang didukung oleh semua browser modern termasuk Chrome, Firefox, Safari, dan Edge tanpa prefix vendor apa pun.

Apakah alat ini mengunggah data saya?

Tidak. Semuanya berjalan langsung di browser Anda, jadi data Anda tidak pernah meninggalkan perangkat — bahkan tetap bisa dipakai offline setelah halaman dimuat.

🎬 Pembuat Keyframe CSS

Desain animasi keyframe CSS dalam hitungan detik — atur transform dan opacity pada setiap titik, lihat preview animasi langsung, dan salin kode @keyframes siap-paste. Tidak perlu instalasi, tidak perlu daftar, berjalan sepenuhnya di browser Anda.

Nama Animasi

Durasi (s)

Waktu

Ulangi

Privat sejak awal. Alat ini berjalan sepenuhnya di browser Anda — tidak ada yang Anda masukkan diunggah atau disimpan, dan bisa dipakai offline.

Tentang

Pembuat Keyframe CSS memungkinkan Anda membuat animasi @keyframes tanpa menulis baris kode CSS sekalipun. Anda mendefinisikan properti transform — translate (X dan Y), scale, dan rotate — serta opacity pada tiga titik kunci: 0%, 50%, dan 100%. Durasi animasi, fungsi timing (ease, linear, ease-in, ease-out, ease-in-out, atau cubic-bezier kustom), dan jumlah pengulangan (terbatas atau tak terbatas) semuanya dapat dikonfigurasi di panel. Preview animasi langsung diperbarui secara instan sehingga Anda dapat menyetel nilai hingga gerakan terasa tepat. Ketika siap, klik Salin dan blok @keyframes lengkap — termasuk singkatan animasi — akan ditempatkan di clipboard Anda dan siap untuk di-paste ke dalam stylesheet Anda. Segalanya berjalan di browser tanpa mengunggah file apa pun dan tanpa mengirimkan data ke mana pun.

Cara pakai

Atur nilai transform — translate X/Y, scale, dan rotate — serta opacity untuk titik 0% (awal animasi).
Atur nilai titik 50% untuk mendefinisikan titik tengah gerakan, atau biarkan tetap default untuk membuat transisi dua keadaan sederhana.
Atur nilai titik 100% untuk keadaan akhir, lalu konfigurasikan durasi (dalam detik), fungsi timing, dan jumlah pengulangan.
Lihat preview langsung yang diperbarui secara real-time dan atur ulang nilai apa pun hingga animasi terlihat tepat.
Klik Salin CSS untuk menyalin blok @keyframes lengkap dan properti animasi ke clipboard Anda, lalu tempelkan langsung ke dalam stylesheet Anda.

FAQ

Properti transform apa saja yang dapat saya animasikan?: Anda dapat menganimasikan translateX, translateY, scale, dan rotate, serta opacity. Setiap properti diatur secara independen pada titik kunci 0%, 50%, dan 100%.
Fungsi timing apa saja yang tersedia?: Pembuat menyediakan preset ease, linear, ease-in, ease-out, dan ease-in-out, serta opsi cubic-bezier kustom sehingga Anda dapat membuat kurva percepatan unik.
Apakah saya bisa membuat animasi berulang selamanya?: Ya. Atur jumlah pengulangan ke Infinite dan CSS yang dihasilkan akan menggunakan animation-iteration-count: infinite, sehingga animasi akan terus berulang.
Apakah saya perlu mengetahui CSS untuk menggunakan alat ini?: Tidak. Pembuat ini sepenuhnya visual — hanya geser slider dan pilih nilai dari dropdown. CSS dibuat secara otomatis untuk Anda dan siap disalin ke proyek apa pun.
Apakah CSS yang dihasilkan kompatibel dengan semua browser modern?: Ya. Output menggunakan @keyframes standar dan properti singkatan animasi, yang didukung oleh semua browser modern termasuk Chrome, Firefox, Safari, dan Edge tanpa prefix vendor apa pun.
Apakah alat ini mengunggah data saya?: Tidak. Semuanya berjalan langsung di browser Anda, jadi data Anda tidak pernah meninggalkan perangkat — bahkan tetap bisa dipakai offline setelah halaman dimuat.