Softonic

Generator Animasi CSS

Langkah 1 / 2
Preset
Berikutnya

Menulis @keyframes dari nol itu membosankan: Anda memilih persentase, menebak properti, memuat ulang, mengamati, menyesuaikan. Generator ini menyediakan enam animasi siap pakai (fade, slide up, bounce, spin, pulse, dan shake) serta memungkinkan Anda mengatur nama animasi, durasi, easing, jumlah perulangan, dan arah. Hasilnya diputar waktu nyata, dan setelah Anda puas, salin blok @keyframes yang dihasilkan dan properti singkat animation.

Cara membuat animasi CSS

  1. 1

    Pilih preset

    Pilih salah satu dari enam animasi bawaan: fade, slide up, bounce, spin, pulse, atau shake.

  2. 2

    Beri nama animasi

    Beri keyframes pengenal CSS yang valid, misalnya `cardIn` atau `fadeIn`. Nama yang sama dipakai pada properti singkat `animation`.

  3. 3

    Atur waktu dan pengulangan

    Durasi dalam detik, easing (ease, ease-in, ease-out, ease-in-out, linear, atau spring), jumlah perulangan (1, 2, 3, atau infinite), dan arah (normal, reverse, alternate, atau alternate-reverse).

  4. 4

    Salin CSS

    Aturan `@keyframes` yang dihasilkan dan properti singkat `animation:` siap ditempel ke stylesheet Anda.

Anatomi animasi

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Delapan properti pada properti singkat: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Pilihan easing

Generator ini menawarkan enam fungsi easing:

Easing cubic-bezier() Kesan
linear n/a Kecepatan konstan
ease-in 0.42, 0, 1, 1 Mulai lambat, akhir cepat
ease-out 0, 0, 0.58, 1 Mulai cepat, akhir lambat
ease-in-out 0.42, 0, 0.58, 1 Lambat-cepat-lambat
ease (bawaan) 0.25, 0.1, 0.25, 1 Bawaan yang halus
spring 0.68, -0.55, 0.27, 1.55 Melewati target lalu tenang

Animasikan properti yang tepat

Browser dapat menganimasikan properti apa pun, tetapi hanya sedikit yang berjalan mulus di GPU tanpa memicu layout atau paint:

Murah (komposit saja): transform, opacity, filter.

Mahal (layout/paint): width, height, top, left, margin, padding, background-color.

Animasi enam puluh frame per detik pada width dan top mungkin untuk elemen kecil, tetapi akan patah-patah di ponsel jika banyak yang dianimasikan sekaligus. Untuk gerakan kompleks, selalu utamakan transform: translate(...) daripada top / left, dan transform: scale(...) daripada lebar/tinggi yang dianimasikan.

will-change: gunakan secukupnya

Memberi tahu browser untuk menyiapkan lapisan komposit lebih dulu dapat membantu kelancaran:

.card { will-change: transform; }

Tetapi ini memakan memori. Terapkan tepat sebelum animasi dipicu dan hapus setelah selesai. Menetapkan will-change: transform secara permanen pada banyak elemen bisa lebih merugikan daripada menguntungkan.

Mengurangi gerakan

Sebagian pengguna sensitif terhadap gerakan dan mengatur preferensi sistem:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Hormati pengaturan ini. Sediakan perubahan status instan atau fade yang sangat halus sebagai pengganti.

Pertanyaan yang Sering Diajukan

CSS untuk gerakan sederhana, deklaratif, dan sekali pakai. Web Animations API (element.animate()) untuk pengaturan waktu berbasis JavaScript, keyframes dinamis, jeda, dan kontrol pemutaran. Keduanya berjalan di kompositor; tidak ada yang secara inheren lebih cepat.

Hampir selalu karena Anda menganimasikan properti pemicu layout (width, top, margin) alih-alih transform. Ganti ke translate() dan scale(), dan sentakan biasanya hilang.

Bisa. animation: a 1s, b 1s 1s, c 1s 2s; menjalankan tiga animasi berurutan melalui penundaan yang digeser. Generator ini menghasilkan satu animasi, jadi tambahkan entri ekstra pada properti singkatnya sendiri. Untuk koreografi yang lebih kompleks, gunakan Web Animations API atau pustaka seperti GSAP.

Ia membuat elemen mengambil status from sebelum animasi dimulai (selama penundaan) dan mempertahankan status to setelah animasi berakhir. Tanpa both, elemen kembali ke gaya sebelum animasi saat animasi selesai. Generator menjaga properti singkat tetap minimal, jadi tambahkan fill mode sendiri jika diperlukan.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

JSON ke YAML

Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.

Decoder JWT

Dekode header dan payload JWT, tampilkan klaim beserta pemeriksaan masa kedaluwarsa dan algoritma tanda tangan, lalu verifikasi menggunakan rahasia bersama atau kunci publik.

Konverter Ukuran File

Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.

Alat ini tersedia dalam bahasa lain