Pembuat Animasi CSS Buat animasi keyframe CSS dengan efek preset dan waktu yang dapat disesuaikan.

🎨

Pembuat Animasi CSS

Buat animasi keyframe CSS dengan efek preset dan waktu yang dapat disesuaikan.

Pilih Prasetel Animasi

Pilih dari animasi bounce, fade, slide, spin, shake, pulse, atau flip.

Sesuaikan Waktu

Atur durasi, fungsi waktu, keterlambatan, hitungan iterasi, dan arah.

Salin CSS

Pratinjau elemen yang dianimasikan dan salin keyframes serta animasi CSS.

Loading tool...

What Is Pembuat Animasi CSS?

Generator Animasi CSS membantu Anda membuat animasi berbasis keyframe dengan perpustakaan efek preset dan penyesuaian waktu yang lengkap. Animasi CSS menghidupkan halaman web dengan memindahkan, mengubah, dan mentransisikan elemen seiring waktu. Alat ini menyediakan tujuh preset animasi populer: bounce, fade, slide, spin, shake, pulse, dan flip-masing-masing dengan @keyframes yang didefinisikan dengan benar. Anda dapat menyesuaikan setiap aspek animasi: durasi mengontrol berapa lama setiap siklus berlangsung, fungsi waktu menentukan kurva kecepatan, penundaan menambahkan jeda sebelum memulai, jumlah iterasi menentukan berapa kali animasi diputar, arah mengontrol urutan pemutaran, dan mode pengisian mendefinisikan status elemen sebelum dan setelah animasi. Pratinjau langsung menampilkan animasi dalam aksi.

Why Use Pembuat Animasi CSS?

Tujuh prasetel animasi populer siap digunakan
Kontrol penuh atas durasi, waktu, keterlambatan, dan iterasi
Kontrol arah animasi dan mode pengisian
CSS yang dihasilkan mencakup definisi @keyframes lengkap

Common Use Cases

Animasi Masuk

Animasikan elemen saat memasuki viewport untuk pengalaman pengguna yang menarik.

Indikator Pemuatan

Buat animasi keadaan pemuatan dengan efek pulse, spin, atau bounce.

Mencari Perhatian

Gunakan shake atau pulse untuk menarik perhatian pada elemen penting.

Transisi Halaman

Tambahkan animasi slide dan fade untuk transisi halaman atau bagian yang mulus.

Technical Guide

Animasi CSS menggunakan properti singkatan animasi dengan aturan @keyframes. Properti animasi menggabungkan: nama-animasi (mengacu pada aturan @keyframes), durasi-animasi, fungsi-waktu-animasi (ease, linear, ease-in, ease-out, ease-in-out, atau cubic-bezier kustom), penundaan-animasi, jumlah-iterasi-animasi (angka atau tak terhingga), arah-animasi (normal, reverse, alternate, alternate-reverse), mode-pengisian-animasi (none, forwards, backwards, both), dan status-pemutaran-animasi (running, paused). Aturan @keyframes mendefinisikan tahap animasi menggunakan persentase (0% hingga 100%) atau kata kunci from/to. Untuk performa, animasikan hanya properti transform dan opacity jika memungkinkan, karena ini dapat dipercepat oleh GPU. Properti lain seperti lebar, tinggi, margin, dan padding memicu perhitungan ulang tata letak. Gunakan properti will-change untuk memberi petunjuk kepada browser tentang animasi yang akan datang.

Tips & Best Practices

1
Gunakan animation-fill-mode: both untuk mempertahankan keadaan akhir setelah animasi berakhir
2
Animasikan hanya transform dan opacity untuk kinerja GPU yang dipercepat
3
Tambahkan media query prefers-reduced-motion untuk aksesibilitas
4
Gunakan arah alternatif untuk animasi bolak-balik yang alami

Related Tools

Pembuat Spinner CSS

Buat spinner loading CSS dan loader animasi dengan gaya yang dapat disesuaikan.

🎨 CSS & Design

Tempat Bermain CSS Transform

Eksperimen dengan transformasi CSS termasuk putar, skala, miring, dan terjemahkan dengan perspektif 3D.

🎨 CSS & Design

Pembuat Transisi CSS

Buat transisi CSS dengan properti, durasi, easing, dan efek hover yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Kolom CSS

Buat tata letak teks multi-kolom dengan jumlah kolom, jarak, dan gaya aturan yang dapat disesuaikan.

🎨 CSS & Design

Frequently Asked Questions

Q Apa perbedaan antara animasi dan transisi?

Transisi memerlukan pemicu (seperti hover) dan menganimasikan antara dua keadaan. Animasi dapat berjalan secara otomatis dengan beberapa tahap keyframe.

Q Bisakah saya menggabungkan beberapa animasi?

Ya, gunakan nilai yang dipisahkan koma dalam properti animasi atau gunakan animation-delay untuk mengurutkannya.

Q Bagaimana cara saya menjeda animasi?

Atur animation-play-state: paused untuk menjeda, dan running untuk melanjutkan.

Q Apa yang dilakukan oleh animation-fill-mode?

Mendefinisikan keadaan elemen sebelum/sesudah animasi. forwards mempertahankan keadaan akhir, backwards menerapkan keyframe pertama selama keterlambatan.

Q Apakah animasi CSS dapat diakses?

Gunakan media query prefers-reduced-motion untuk menyediakan alternatif bagi pengguna yang sensitif terhadap gerakan.

About This Tool

Pembuat Animasi CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.