Lewati ke konten
ID

Generator animasi CSS

Buat animasi CSS secara langsung: 15 efek (fade, geser, pantul, denyut…), durasi, jeda, kurva, pengulangan. Kode @keyframes siap disalin.

  • Gratis
  • Tanpa daftar
  • Tanpa unggah file
  • Windows, Mac, Android, iPhone

Memuat alat…

Tentang alat ini

Hidupkan antarmuka Anda tanpa pustaka: 15 animasi CSS siap pakai (fade, geser, zoom, pantul, denyut, guncang, putar, balik…) dengan durasi, jeda, kurva waktu, pengulangan, arah, dan mode pengisian yang bisa diatur. Kode @keyframes siap disalin, termasuk versi yang menghormati gerakan dikurangi.

Kapan menggunakannya

Kemunculan konten

Geser ke atas 0,5 detik pada kartu-kartu halaman membuat pemuatan terasa lebih halus.

Menarik perhatian

Denyut halus pada tombol atau guncangan pada kolom yang salah mengarahkan mata tanpa teks tambahan.

Indikator pemuatan

Putaran linear tanpa henti membuat spinner pemuatan dalam beberapa baris.

Cara menggunakan

  1. Pilih efek animasi.
  2. Atur durasi, jeda, kurva, dan pengulangan.
  3. Salin kode @keyframes dan aturan animation.

Cara kerjanya

Setiap efek adalah rangkaian tahapan @keyframes yang hanya memakai transform dan opacity, dua properti paling lancar untuk dianimasikan. Pratinjau menyisipkan tahapan ini dengan nama sendiri agar tidak bentrok dengan animasi situs.

Properti animation ditulis dalam bentuk singkat: nama, durasi, kurva, lalu jeda, pengulangan, arah, dan mode pengisian hanya jika berbeda dari bawaan.

Tips untuk hasil terbaik

  • 200 hingga 500 ms untuk animasi antarmuka: lebih dari itu terasa lambat.
  • ease-out cocok untuk kemunculan, ease-in untuk menghilang.
  • Hindari animasi tanpa henti pada teks yang perlu dibaca: melelahkan.
  • Geser sedikit jeda setiap kartu untuk efek berurutan.

Masalah umum dan solusinya

Elemen melompat kembali di akhir

Tambahkan animation-fill-mode: forwards (atau both) untuk mempertahankan keadaan akhir.

Elemen muncul lalu hilang selama jeda

Dengan jeda, gunakan both agar keadaan awal (tersembunyi) langsung diterapkan.

Animasi tidak diputar ulang

Animasi CSS diputar sekali per render. Untuk memulai ulang, hapus lalu tambahkan kembali kelasnya dengan JavaScript.

Pertanyaan umum

Apa itu @keyframes?

Aturan CSS yang menjelaskan tahapan animasi (dari 0% hingga 100%). Properti animation menerapkannya pada elemen dengan durasi, kurva kecepatan, dan jumlah pengulangan.

Apa gunanya animation-fill-mode?

Menentukan apa yang ditampilkan sebelum dan sesudah animasi. “both” mempertahankan keadaan awal selama jeda dan keadaan akhir setelahnya: penting untuk efek kemunculan.

Apakah animasi CSS lancar?

Ya, terutama yang hanya memakai transform dan opacity, seperti semua efek di sini: browser menghitungnya di kartu grafis.

Bagaimana menghormati orang yang sensitif terhadap gerakan?

Tab “Dengan gerakan dikurangi” menambahkan aturan prefers-reduced-motion yang mematikan animasi jika pengguna memintanya di pengaturan sistem.

Pencarian terkait

Masih bermasalah?

Tanyakan di forum: kategori, alat, data perangkat, dan hasil tes akan diisi otomatis.