Generator

Generator Animasi CSS

Buat animasi CSS secara visual dengan pratinjau langsung, efek preset, kontrol waktu, dan output kode instan.

Pratinjau Langsung

Warna Latar

#6366f1

W: 80px

H: 80px

Sudut Membulat: 12px

Nama Animasi

Digunakan sebagai nama @keyframes dan identifier properti animasi.

Durasi: 1s

Tunda: 0s

Fungsi Waktu

Iterasi

Arah

Mode Isi

Prefix Browser(-webkit-, -moz-)

Pudar

Skala

Geser

Spesial

Perhatian

Padanan Tailwind

animate-in fade-in

Memerlukan Tailwind CSS v3+ dengan plugin animate atau tailwindcss-animate.

CSS yang Dihasilkan

@keyframes myAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: myAnimation 1s ease 0s infinite normal both;
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

Tentang Generator Animasi CSS

Generator animasi CSS memungkinkan Anda membuat dan menyesuaikan animasi @keyframes CSS tanpa menulis kode dari awal. Pilih dari animasi preset (fade, slide, bounce, dll.), sesuaikan pengaturan waktu, durasi, dan iterasi, pratinjau secara real-time, dan salin CSS yang dihasilkan langsung ke proyek Anda.

Jelajahi semua alat Generator

Cara Menggunakan

Pilih animasi preset dari galeri atau tulis keyframes kustom. Sesuaikan durasi, jeda, fungsi waktu, dan jumlah iterasi menggunakan kontrol. Saksikan pratinjau langsung diperbarui secara instan. Sesuaikan tampilan elemen pratinjau agar sesuai dengan kebutuhan Anda. Klik Salin CSS untuk mendapatkan kode animasi lengkap yang siap ditempel ke stylesheet Anda.

Kasus Penggunaan Umum

Membuat animasi masuk dan keluar untuk komponen UI
Membangun indikator loading dan efek perhatian
Menambahkan mikrointeraksi ke tombol, kartu, dan notifikasi
Belajar sintaks animasi CSS dengan umpan balik visual
Membuat prototipe ide animasi dengan cepat untuk presentasi klien

Cara Menggunakan Generator Animasi CSS Istirahat sejenak dan mainkan game browser gratis

Ulasan

Baca dan tulis ulasan alat→

Diskusikan alat ini→