Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Animasi Frame CSS

WarnaPengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Preset Animasi

Telah ditetapkan sebelumnya

Pengaturan Animasi

Nama

Durasi (detik)

Pengaturan pergerakan

cubic-bezier()

Iterasi

Tak terbatas

Arah

Mode Pengisian

Frame Kunci

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator Animasi Frame CSS

Buat animasi @keyframes CSS secara visual dengan tampilan langsung. Pilih dari 10 preset populer seperti bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash, dan wobble — atau buat animasi keyframe kustom dari awal. Sesuaikan waktu, pengaturan pergerakan, jumlah iterasi, arah, dan mode pengisian, lalu salin kode CSS yang dihasilkan.

Cara Penggunaan

Pilih animasi preset atau mulai dengan animasi kustom. Konfigurasikan pengaturan animasi — nama, durasi, fungsi pengaturan pergerakan, jumlah iterasi, arah, dan mode pengisian. Sunting henti keyframe dengan menetapkan persentase, nilai transformasi CSS, dan kecerahan untuk setiap henti. Tambahkan atau hapus henti keyframe sesuai kebutuhan. Lihat tampilan langsung animasi yang diperbarui secara real-time, lalu salin kode CSS yang dihasilkan.

Fitur

10 Preset Animasi – Bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash, dan wobble siap digunakan
Editor Keyframe Kustom – Tambahkan, hapus, dan sunting henti keyframe dengan kontrol persentase, transformasi, dan kecerahan
Tampilan Animasi Langsung – Lihat animasi Anda berjalan pada elemen demo secara real-time saat Anda membuat perubahan
Kontrol Penuh Animasi – Konfigurasikan durasi, pengaturan pergerakan (termasuk kustom cubic-bezier), jumlah iterasi, arah, dan mode pengisian
Keluar CSS Bersih – Menghasilkan aturan @keyframes dan properti singkat animasi siap dipaste ke dalam stylesheet Anda

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa itu CSS @keyframes?

CSS @keyframes menentukan tahapan urutan animasi. Setiap keyframe menentukan gaya pada titik tertentu selama jalur animasi, dinyatakan sebagai persentase dari 0% (awal) hingga 100% (akhir). Browser menginterpolasi nilai properti antara keyframe untuk menciptakan transisi yang halus.
Perbedaan antara CSS transitions dan CSS animations?

CSS transitions menganimasikan perubahan properti antara dua keadaan (misalnya saat hover), yang diaktifkan oleh perubahan keadaan. CSS animations menggunakan @keyframes dapat berjalan secara otomatis, berulang, memiliki beberapa tahap antara, dan menawarkan lebih banyak kontrol dengan properti seperti animation-direction, iteration-count, dan fill-mode.
Apa fungsi properti fill-mode animasi?

Properti animation-fill-mode mengatur bagaimana gaya diterapkan sebelum dan sesudah animasi berjalan. 'ke depan' mempertahankan gaya keyframe akhir setelah animasi selesai. 'ke belakang' menerapkan gaya keyframe pertama selama periode penundaan. 'kedua' menerapkan kedua perilaku tersebut. 'tidak ada' kembali ke gaya asli elemen.
Apa itu fungsi easing cubic-bezier?

Fungsi easing cubic-bezier menentukan kurva kecepatan khusus untuk animasi menggunakan empat titik kontrol (x1, y1, x2, y2). Fungsi ini menentukan seberapa cepat atau lambat animasi bergerak pada titik-titik waktu tertentu. Preset umum seperti ease, ease-in, dan ease-out adalah singkatan nama untuk nilai cubic-bezier tertentu.