CSS Animasi Generator

Cara menggunakan

1. Pilih preset animasi: pilih dari animasi umum, fade, slide, bounce, spin, pulse, shake, dan lainnya.
2. Sesuaikan durasi dan perilaku: atur durasi, delay, fungsi easing, jumlah iterasi, dan fill mode.
3. Salin CSS: definisi @keyframes lengkap dan properti shorthand animation siap untuk ditempel ke stylesheet Anda.

Mengapa menggunakan generator animasi CSS?

Animasi CSS menghidupkan antarmuka, menarik perhatian ke elemen utama, memberikan umpan balik visual, dan menciptakan pengalaman pengguna yang halus. Menulis aturan @keyframes secara manual memerlukan pengetahuan sintaks yang benar, nama easing, dan kombinasi properti yang tepat. Generator ini menawarkan preset animasi yang elegan dengan pratinjau langsung dan memungkinkan Anda menyesuaikan setiap parameter, menghasilkan CSS siap produksi tanpa JavaScript atau pustaka animasi.

Fitur

• Preset animasi: fade, slide, bounce, spin, pulse, shake, flip, zoom, dll., semua dengan pratinjau langsung.
• Editor keyframe kustom: bangun animasi Anda sendiri dari awal dengan antarmuka visual.
• Kontrol timing: atur durasi (ms/s), delay, easing (linear, ease, cubic-bezier), dan jumlah iterasi.
• Mode fill: kontrol perilaku forwards, backwards, both, dan none.
• Tidak butuh JavaScript: semua animasi yang dihasilkan adalah CSS murni, tanpa pustaka atau framework.

Pertanyaan umum

Apa perbedaan antara animation dan transition di CSS?

Transisi CSS dipicu pada perubahan status (hover, focus, toggle kelas) dan menganimasikan antara dua status. Animasi CSS menggunakan @keyframes untuk menentukan beberapa status dan berjalan secara independen dari interaksi pengguna, mereka dapat berputar, berbalik, dan mulai secara otomatis.

Apa itu animation-fill-mode dan mengapa penting?

animation-fill-mode mengontrol apakah elemen mempertahankan gaya animasi sebelum dimulai (backwards), setelah selesai (forwards), atau keduanya. Tanpa forwards, elemen kembali secara mendadak ke gaya aslinya di akhir animasi.

Apakah animasi CSS performa?

Animasi yang hanya menggunakan transform dan opacity dipercepat oleh GPU dan sangat halus. Hindari menganimasikan properti tata letak seperti width, height, margin, atau top/left, mereka memicu perhitungan ulang layout dan dapat menyebabkan terbengkalai. Tetap dengan transform dan opacity untuk 60 fps.

Apa yang sebenarnya dilakukan animasi CSS

Animasi CSS menginterpolasi satu atau lebih properti CSS antara keyframe yang ditentukan dari waktu ke waktu, menghasilkan gerakan atau perubahan yang terlihat tanpa JavaScript. Modelnya memiliki dua bagian: aturan @keyframes mendefinisikan tampilan animasi pada langkah berbasis persentase (0% hingga 100%), dan properti shorthand animation (atau saudara longhand-nya animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode) memberi tahu browser bagaimana memutar definisi keyframes itu. Browser menangani semua interpolasi, easing, dan waktu frame dalam C++, biasanya dipercepat GPU untuk perubahan transform dan opacity.

Animasi berbeda dari transisi CSS dalam dua cara. Transisi terpicu ketika status elemen berubah (hover, toggle kelas, event focus) dan menginterpolasi antara persis dua nilai: lama dan baru. Animasi berjalan terlepas dari status, mengikuti jumlah langkah keyframe yang sembarang, dapat berlangsung tanpa batas, dapat diputar terbalik, dan dapat dipicu, dijeda, dan dilanjutkan melalui CSS atau JavaScript. Transisi adalah alat yang tepat untuk "snap dari A ke B dalam setengah detik"; animasi adalah alat yang tepat untuk "loop pulsa yang menarik perhatian ini selamanya" atau "putar urutan entri ini sekali ketika elemen muncul."

Untuk desain web modern, animasi CSS menggantikan banyak hal yang dulunya memerlukan pustaka JavaScript. Spinner, fade-in, slide-up, pulsa perhatian, tanda centang sukses: semua sekarang adalah pola CSS standar. Trade-off-nya adalah ekspresivitas untuk urutan kompleks. Animasi CSS dapat melakukan banyak hal tetapi berhenti nyaman sekitar 5 hingga 7 langkah keyframe dengan perubahan properti yang disinkronisasi; untuk animasi storyboarded, urutan yang terhubung scroll, atau apa pun yang dinamis yang bergantung pada status JavaScript, pustaka khusus (GSAP, Framer Motion, Web Animations API) tetap menjadi pilihan yang lebih baik.

Cara kerja alat ini di balik layar

Ketika Anda memilih preset (misal "bounce" atau "fade-in") alat memuat string @keyframes yang telah ditentukan ke area pratinjau dan menerapkan properti animation ke kotak pratinjau. Keyframes adalah CSS nyata, bukan format kustom: apa yang Anda lihat adalah apa yang Anda dapatkan untuk disalin. Slider memperbarui nilai timing animasi (duration, delay, iteration count) dengan mengedit properti animation inline secara real time, sehingga pratinjau mencerminkan setiap perubahan secara instan tanpa memuat ulang halaman.

Pemilihan fungsi easing menggunakan nilai timing-function CSS standar: linear (kecepatan konstan), ease (default, awal dan akhir lambat), ease-in (awal lambat), ease-out (akhir lambat), ease-in-out (awal dan akhir lambat), atau cubic-bezier(x1, y1, x2, y2) untuk kurva kustom. Kurva animasi yang terlihat dihitung oleh implementasi timing-function asli browser; pratinjau adalah output yang dirender browser sebenarnya, bukan simulasi JavaScript.

Kotak kode menunjukkan CSS lengkap yang Anda perlukan untuk dimasukkan ke dalam stylesheet: baik blok @keyframes maupun deklarasi .your-class { animation: ... }. Klik "Copy CSS" dan keduanya ditulis ke clipboard Anda sebagai satu blok teks tunggal. Tidak ada file yang dihasilkan, tidak ada server yang memproses apa pun, dan alat tidak memiliki backend untuk dipanggil. Pratinjau, generasi kode, dan penulisan clipboard semuanya terjadi di JavaScript pada perangkat Anda. Refresh halaman dan konfigurasi kustom Anda hilang kecuali Anda menyalinnya terlebih dahulu.

Sejarah singkat animasi web

• Flash mendominasi gerakan web, 1996 hingga 2010.Adobe Flash (awalnya Macromedia) adalah alat utama untuk animasi web sepanjang awal 2000-an. Berbasis vektor, didorong timeline, dengan runtime plugin kustom. Pada tahun 2010, Flash memberdayakan sebagian besar iklan banner, pemutar video YouTube, dan game era Newgrounds. Kemudian perangkat seluler membunuhnya: iPhone tidak pernah mendukung Flash, Android menghentikan dukungan pada 2012, browser menghapus plugin pada 2020.
• Transisi CSS di WebKit, 2007.Mesin WebKit Apple mengirimkan -webkit-transition pada tahun 2007, primitif animasi CSS pertama yang umum digunakan. Banyak digunakan di aplikasi web iPhone awal. Pada tahun 2009, properti ini ada dalam proses spek CSS dan dikirim tanpa prefix di seluruh browser pada tahun 2014.
• CSS Animations Module Level 1, 2009.WebKit menambahkan -webkit-animation dan @-webkit-keyframes pada Maret 2009 mendahului draf W3C CSS Animations Module Level 1 (juga 2009). Firefox mengikuti pada versi 5 (2011), IE pada versi 10 (2012). Era "tidak perlu JavaScript untuk animasi dasar" dimulai.
• GSAP dan pustaka animasi JS, dari 2008 dan seterusnya.Metode .animate() jQuery (2006) memulai era pustaka animasi JS; GreenSock Animation Platform (GSAP, diluncurkan 2008) menjadi standar emas untuk animasi berurutan yang kompleks, scrubbing timeline, dan performa. Digunakan di Disney, Coca-Cola, dan situs pemasaran tingkat Awwwards. Tetap hidup berdampingan dengan animasi CSS: GSAP untuk kompleksitas berurutan, CSS untuk kesederhanaan deklaratif.
• Web Animations API distandardisasi, 2014 hingga 2018.Spesifikasi W3C Web Animations menyediakan API JavaScript yang memaparkan animasi CSS dan menambahkan kontrol pemrograman: element.animate(keyframes, options). Chrome dikirim pada versi 36 (2014), Firefox pada versi 75 (2020), Safari pada versi 13.1 (2020). Menjembatani celah antara CSS deklaratif dan JavaScript dengan tenaga pustaka penuh.
• Animasi yang didorong scroll mendarat, 2023 hingga 2024.Modul Animasi yang Didorong Scroll CSS memperkenalkan animation-timeline, memungkinkan animasi CSS untuk mengikat ke posisi scroll alih-alih (atau selain) waktu. Chrome 115 (Juli 2023) dikirim pertama; Safari dan Firefox menambahkan dukungan sepanjang 2024 dan 2025. Membuka efek paralaks, indikator kemajuan scroll, dan animasi pengungkapan bagian dalam CSS murni.

Alur kerja dunia nyata

• Spinner pemuatan dan keadaan skeleton.Loader berputar (animation: spin 1s linear infinite dengan keyframe rotasi 360 derajat) adalah penggunaan animasi CSS yang paling umum. Layar skeleton dengan efek shimmer yang meluncur menggunakan animasi translateX atau background-position. Keduanya penting untuk performa yang dirasakan: saat konten dimuat, animasi memberitahu pengguna "kami sedang bekerja" alih-alih "itu rusak."
• Mikro-interaksi hover dan focus.Tombol yang berdetak halus saat hover, kartu yang terangkat saat focus, ikon yang bergoyang saat klik: mikro-interaksi ini menambahkan kepribadian tanpa intrusif. Gunakan animasi dengan animation-iteration-count: 1 dan animation-fill-mode: forwards untuk perilaku "putar sekali dan tinggal", atau transisi untuk pola "snap ke status hover".
• CTA penarik perhatian.Tombol panggilan-untuk-bertindak utama dengan animasi pulsa kontinu yang lambat atau breathing-glow menarik mata tanpa agresif. Gabungkan transform: scale(1) to scale(1.05) dengan animation-iteration-count: infinite dan durasi 3 hingga 4 detik untuk ritme bernapas yang tenang. Hindari pulsa yang lebih cepat; mereka terasa manik dan mengganggu pengguna dengan cepat.
• Entri halaman dan pengungkapan bagian.Animasi fade-in dan slide-up saat memuat halaman atau scroll-into-view menciptakan kedatangan yang dipoles. CSS menangani kasus sederhana (animasi yang berjalan sekali saat memuat); untuk entri yang dipicu scroll, IntersectionObserver di JavaScript menambahkan kelas yang memicu animasi saat elemen memasuki viewport. Animasi yang didorong scroll modern mulai menggantikan pola ini dalam CSS murni.
• Umpan balik sukses dan goyangan kesalahan.Umpan balik pengiriman formulir menggunakan isyarat animasi: penyimpanan yang sukses menunjukkan tanda centang hijau dengan animasi bounce-in singkat, sementara kesalahan menggoyang formulir sebentar (keyframe translateX bergantian -10px dan +10px selama 0,4 detik). Sentuhan kecil ini membuat interaksi terasa responsif dan disengaja.
• Hero pemasaran dan urutan storytelling.Halaman pendaratan dan bagian hero sering menggunakan animasi entri bertahap (logo memudar masuk, headline meluncur ke atas, tombol CTA berdetak) untuk memfokuskan perhatian melalui urutan yang dirancang. Delay animasi (animation-delay: 0s, 0.3s, 0.6s) pada tiga elemen saudara membuat efek bertingkat tanpa memerlukan orkestrasi JavaScript.

Jebakan umum dan apa artinya

• Menganimasikan properti layout membunuh performa.Properti seperti width, height, margin, padding, top, left, right, bottom, dan font-size memicu kalkulasi ulang layout pada setiap frame animasi, sering menyebabkan jank atau performa di bawah 60fps. Gunakan transform: translateX() alih-alih left, transform: scale() alih-alih width/height, dan opacity alih-alih visibility. Transform dan opacity dikomposit GPU dan tidak memicu layout.
• Mengabaikan prefers-reduced-motion merusak aksesibilitas.Beberapa pengguna mengalami mabuk gerak atau gangguan vestibular yang dipicu oleh animasi web. Media query prefers-reduced-motion: reduce memungkinkan pengguna opt out di tingkat OS. Bungkus animasi dekoratif Anda dalam @media (prefers-reduced-motion: no-preference) { ... } atau atur animation-duration: 0.01ms untuk pengguna yang meminta gerakan yang dikurangi. Animasi penting (spinner pemuatan) dapat tetap, tetapi yang dekoratif harus menghormati preferensi.
• Penggunaan will-change berlebihan merusak memori.Properti will-change mengisyaratkan ke browser untuk mempromosikan elemen ke GPU sebelumnya, yang dapat memuluskan animasi. Tetapi menambahkan will-change ke banyak elemen mengkonsumsi memori GPU yang signifikan. Terapkan hanya pada elemen yang benar-benar Anda animasikan, idealnya ditambahkan melalui JavaScript tepat sebelum animasi dimulai dan dihapus sesudahnya. Mengatur will-change: transform pada setiap elemen di halaman adalah antipattern.
• Kebingungan animation-fill-mode.Secara default, elemen kembali ke gaya aslinya setelah animasi berakhir. Untuk mempertahankan keadaan akhir animasi, gunakan animation-fill-mode: forwards. Untuk memulai elemen dalam keadaan pertama animasi sebelum delay berlalu, gunakan backwards. Untuk melakukan keduanya, gunakan both. Banyak bug "mengapa elemen saya snap kembali?" datang dari kehilangan properti ini. Nilai default adalah none, yang jarang menjadi apa yang Anda inginkan untuk animasi entri sekali pakai.
• Animasi tak terbatas menguras baterai seluler.Animasi animation-iteration-count: infinite berjalan selamanya, menjaga GPU aktif dan tingkat refresh layar pada maksimum. Pada perangkat seluler, ini menguras baterai secara nyata. Untuk animasi kontinu dekoratif (logo yang bernapas dengan lembut), pertimbangkan menjeda animasi saat halaman disembunyikan (document.visibilityState !== 'visible'), atau membatasi jumlah iterasi ke angka terbatas seperti 3 hingga 5 alih-alih tak terbatas.
• Konflik penamaan keyframe pada skala.Nama aturan @keyframes bersifat global dalam stylesheet: @keyframes fade di satu file berbenturan dengan @keyframes fade di file lain. Untuk basis kode besar, namespace nama keyframe Anda (@keyframes app-fade-in, @keyframes hero-slide-up) untuk menghindari penimpaan diam-diam. CSS modules dan pustaka CSS-in-JS menangani ini secara otomatis dengan scope-hashing.

Privasi: semuanya berjalan di browser Anda

Alat generator CSS hadir dalam dua varietas: halaman HTML sederhana yang menjalankan JavaScript sisi klien (pribadi, cepat) dan editor cloud yang menyimpan proyek Anda (kolaboratif tetapi dengan trade-off privasi). Alat ini adalah jenis pertama. Nilai slider Anda, preset yang Anda pilih, CSS yang dihasilkan: semua tetap dalam sesi browser Anda. Refresh halaman dan statusnya hilang kecuali Anda menyalin CSS terlebih dahulu. Tidak ada server yang menyimpan pilihan animasi Anda, tidak ada analitik yang melacak preset mana yang Anda uji, dan tidak ada akun yang diperlukan.

Properti privasi paling penting untuk pekerjaan desain proprietary. Studio yang membuat prototipe animasi untuk proyek klien rahasia, pengembang yang bekerja pada mikro-interaksi aplikasi yang belum diumumkan, atau desainer yang melakukan iterasi pada kampanye merek: setiap konteks di mana riwayat iterasi atau desain yang sedang berlangsung dapat membocorkan informasi tentang pekerjaan. Dengan alat ini, tidak ada yang ditangkap karena tidak ada yang dikirim. Buka tab Jaringan browser dan Anda akan melihat nol permintaan keluar selama penggunaan; hanya pemuatan halaman awal yang mengambil HTML dan JavaScript.

Ketika alat lain adalah pilihan yang tepat

• GSAP untuk animasi berurutan yang kompleks.GreenSock Animation Platform (GSAP) menangani animasi sinkron, berurutan, scrubable jauh lebih baik daripada CSS murni. Untuk animasi pemasaran storyboarded, urutan terkait scroll dengan kemampuan reverse, atau apa pun yang bergantung pada perubahan status JavaScript, GSAP adalah standar industri. Gratis untuk sebagian besar kasus penggunaan (dengan lisensi klub untuk beberapa plugin).
• Lottie untuk animasi yang dibuat desainer.Lottie (awalnya dari Airbnb) merender animasi After Effects sebagai JSON, memungkinkan desainer membuat gerakan kompleks di After Effects dan mengekspor langsung ke web/iOS/Android. Untuk animasi yang melampaui apa yang dapat dihasilkan keyframe yang dikodekan tangan secara praktis (animasi karakter, morfing kompleks, urutan ilustrasi), pipeline desain-ke-kode Lottie menang atas animasi CSS manual.
• Web Animations API untuk kontrol JavaScript.Jika Anda perlu memulai, menjeda, membalikkan, atau memodifikasi animasi dari JavaScript saat runtime, Web Animations API (element.animate(keyframes, options)) lebih ergonomis daripada mengelola kelas CSS. Mengembalikan objek Animation dengan metode seperti .pause(), .play(), .reverse(), dan Promise .finished. Dukungan browser asli, tidak perlu pustaka.
• requestAnimationFrame untuk loop game.Untuk animasi yang didorong oleh logika JavaScript kontinu (loop game, simulasi fisika, visualisasi data real-time), requestAnimationFrame dengan pembaruan properti per frame manual adalah pendekatan yang tepat. Animasi CSS bersifat deklaratif dan telah ditentukan sebelumnya; rAF memberi Anda kontrol per frame atas apa yang akan diperbarui. Gunakan Canvas atau WebGL ketika Anda juga membutuhkan kontrol tingkat piksel.

Pertanyaan lain yang sering diajukan

Bagaimana cara membuat animasi diputar hanya sekali?

Setel animation-iteration-count: 1 (yang merupakan default jika tidak ditentukan). Untuk membuat elemen tetap dalam keadaan akhir animasi setelah selesai (alih-alih kembali ke gaya asli), atur juga animation-fill-mode: forwards. Shorthand gabungan adalah animation: fadeIn 0.5s ease-out forwards;.

Bisakah saya menjeda dan melanjutkan animasi?

Ya, dengan animation-play-state: paused (atau running). Toggle properti ini melalui JavaScript (mis., pada klik tombol) atau di CSS melalui :hover untuk pola "jeda saat hover". Animasi membeku pada titik saat ini dan dilanjutkan dari sana ketika diatur kembali ke running, tidak ada kemajuan yang hilang. Ini bekerja sama dalam transisi tetapi hanya properti animation-play-state yang ada untuk kontrol jeda runtime.

Bagaimana cara memicu animasi saat klik atau scroll?

Untuk pemicu klik, toggle kelas CSS melalui JavaScript: element.classList.toggle('animate-in'). Animasi berjalan ketika kelas ditambahkan. Untuk pemicu scroll, gunakan IntersectionObserver untuk mendeteksi ketika elemen memasuki viewport dan tambahkan kelas saat itu. Untuk browser modern, Animasi yang Didorong Scroll CSS memungkinkan Anda mengikat kemajuan animasi langsung ke posisi scroll tanpa JavaScript melalui animation-timeline: scroll().

Mengapa animasi saya berkedip atau gagap?

Sebagian besar masalah berkedip/gagap datang dari menganimasikan properti yang memicu layout (width, height, top/left) alih-alih ekivalen berbasis transform. Beralih left: 0 ke transform: translateX(0) dan animasi harus halus. Penyebab lain: overdraw dari banyak lapisan semi-transparan, layout thrashing dari JavaScript yang membaca dan menulis gaya dalam frame yang sama, atau bayangan dan filter berlebihan pada elemen yang dianimasikan.

Haruskah saya menggunakan animasi pada antarmuka yang penting untuk aksesibilitas?

Gunakan mereka, tetapi hormati prefers-reduced-motion. Pedoman WCAG 2.1 merekomendasikan menyediakan opsi untuk menonaktifkan gerakan non-esensial. Bungkus animasi dekoratif dalam @media (prefers-reduced-motion: no-preference) sehingga pengguna yang mengatur preferensi OS mendapatkan pengalaman statis. Animasi umpan balik penting (indikator pemuatan, goyangan kesalahan) dapat dipertahankan; yang murni dekoratif harus opt-in untuk pengguna sensitif.

Bisakah saya menggunakan cubic-bezier untuk kurva easing kustom?

Ya. Fungsi timing cubic-bezier(x1, y1, x2, y2) memungkinkan Anda mendefinisikan kurva easing apa pun dengan dua titik kontrol. Setiap nilai x antara 0 dan 1 (mewakili waktu), nilai y bisa negatif atau lebih besar dari 1 (memungkinkan efek overshoot dan bounce). Gunakan alat Cubic Bezier kami atau cubic-bezier.com klasik Lea Verou untuk memilih kurva secara visual. Alternatif preset umum: ease, ease-in, ease-out, ease-in-out, dan variabel CSS linear-aliased cubic-bezier(0.25, 0.1, 0.25, 1) (ease default).