Pembuat animasi CSS
Buat animasi keyframe CSS dengan editor linimasa visual
Pengaturan animasi
Preset animasi
Keyframe
0% → 100%
Keyframe · 0%
Keyframe · 100%
Pratinjau langsung
CSS yang dihasilkan
@keyframes myAnimation {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-delay: 0s;
}Edit keyframe lalu putar ulang untuk memeriksa animasi Anda.
Contoh transformasi cepat
translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)mis. skewX(10deg) / skewY(-5deg)mis. perspective(400px) rotateY(180deg)Tentang Pembuat animasi CSS
Dengan pembuat animasi CSS gratis ini, Anda dapat membuat animasi keyframe profesional secara visual tanpa menulis kode rumit dari nol. Atur setiap aspek animasi Anda, dari durasi dan fungsi timing hingga properti keyframe individual, dan lihat hasilnya seketika lewat pratinjau langsung yang diperbarui secara real time.
Baik Anda membutuhkan efek fade-in yang halus, pantulan yang menarik perhatian, maupun animasi multi-langkah kustom, alat ini menyediakan 10 preset bawaan dan editor keyframe lengkap. Setiap preset dapat disesuaikan sepenuhnya, jadi Anda dapat memakainya sebagai titik awal dan menyempurnakan setiap properti, termasuk transform, opacity, dan warna latar, pada titik persentase mana pun.
Pembuat ini menghasilkan kode CSS siap produksi yang bersih dengan sintaks @keyframes yang tepat dan properti animasi individual. Cukup salin kode yang dihasilkan lalu tempel ke stylesheet Anda. Semua pemrosesan berlangsung di browser Anda tanpa unggahan ke server, sehingga pekerjaan Anda tetap privat dan aman.
Fitur utama
- Editor keyframe visual dengan kontrol transform, opacity, dan background-color per keyframe
- 10 preset animasi siap pakai: Pantul, Muncul perlahan, Hilang perlahan, Geser masuk dari kiri, Geser masuk dari kanan, Putar, Denyut, Getar, Balik, dan Perbesar
- Panel pratinjau langsung dengan pemutaran ulang instan untuk menguji animasi
- Kontrol penuh properti animasi, termasuk durasi, fungsi timing, jumlah iterasi, arah, mode fill, dan jeda
- Dukungan fungsi timing cubic-bezier kustom untuk kurva easing yang presisi
- Tambah dan hapus keyframe pada titik persentase mana pun (0%, 25%, 50%, 75%, 100%, atau kustom)
- Keluaran CSS @keyframes dan properti animasi individual yang bersih dan siap produksi
- Salin ke papan klip sekali klik untuk integrasi instan ke proyek Anda
- Penamaan animasi kustom untuk kode yang terorganisasi dan semantik
- Dukungan mode gelap penuh untuk pengeditan yang nyaman di lingkungan apa pun
Cara menggunakan Pembuat animasi CSS
- Pilih titik awal: Pilih salah satu dari 10 preset bawaan seperti Pantul, Muncul perlahan, atau Putar, atau mulai dengan animasi kosong.
- Atur properti animasi: Tentukan durasi, fungsi timing, jumlah iterasi, arah, mode fill, dan jeda menggunakan kontrol yang intuitif.
- Edit keyframe: Tambah, hapus, atau ubah keyframe pada titik persentase mana pun. Tentukan nilai transform, opacity, dan warna latar untuk setiap keyframe.
- Pratinjau animasi Anda: Lihat pratinjau langsung diperbarui secara real time. Klik Putar ulang untuk memulai ulang animasi dan memverifikasi hasilnya.
- Salin kode CSS: Klik tombol Salin CSS untuk menyalin kode @keyframes dan properti animasi yang dihasilkan ke papan klip Anda.
- Tempel ke proyek Anda: Tambahkan CSS yang disalin ke stylesheet Anda dan terapkan kelas animasi ke elemen HTML Anda.
Kasus penggunaan
- Mikro-interaksi: Tambahkan efek hover yang halus, animasi tombol, dan isyarat umpan balik untuk meningkatkan keterlibatan pengguna.
- Indikator pemuatan: Buat spinner kustom, efek denyut, dan animasi skeleton screen untuk status pemuatan.
- Transisi halaman: Buat efek geser masuk, muncul perlahan, dan zoom untuk elemen halaman yang beranimasi saat scroll atau pemuatan.
- Penarik perhatian: Rancang animasi getar, pantul, dan denyut untuk menarik perhatian pengguna ke elemen UI yang penting.
- Prototipe sistem desain: Buat prototipe dengan cepat dan standarkan pola animasi di seluruh pustaka komponen tim Anda.
- Belajar animasi CSS: Bereksperimenlah dengan keyframe, fungsi timing, dan properti animasi dalam lingkungan visual.
- Efek presentasi: Buat elemen beranimasi untuk presentasi berbasis web dan portofolio.
Pertanyaan yang sering diajukan
Apakah alat ini gratis?
Ya, Pembuat animasi CSS sepenuhnya gratis tanpa batas penggunaan. Anda dapat membuat animasi tanpa batas, memakai semua preset, dan menyalin kode CSS yang dihasilkan tanpa pembatasan apa pun.
Apakah data saya aman?
Seluruh pembuatan dan pratinjau animasi berlangsung sepenuhnya di browser Anda. Tidak ada data yang dikirim ke server mana pun, sehingga konfigurasi animasi dan kode CSS Anda tetap sepenuhnya privat.
Browser apa saja yang mendukung animasi CSS?
Animasi CSS didukung oleh semua browser modern termasuk Chrome, Firefox, Safari, Edge, dan Opera. Kode yang dihasilkan menggunakan sintaks @keyframes standar yang berfungsi di semua versi browser saat ini.
Bisakah saya menggabungkan beberapa animasi pada satu elemen?
Ya, Anda dapat menerapkan beberapa animasi pada satu elemen dengan memisahkan nama animasi dengan koma di CSS. Buat setiap animasi secara terpisah lalu gabungkan di stylesheet Anda.
Apa itu fungsi timing cubic-bezier?
Fungsi cubic-bezier menentukan kurva percepatan kustom untuk animasi Anda. Fungsi ini memakai empat nilai untuk mengatur bagaimana animasi dipercepat dan diperlambat, sehingga Anda mendapat kontrol yang presisi melebihi opsi standar seperti ease-in atau ease-out.
Tips & praktik terbaik
- Gunakan transform dan opacity: Animasikan properti transform dan opacity untuk performa terbaik, karena keduanya dapat diakselerasi perangkat keras oleh GPU.
- Jaga animasi tetap halus: Animasi yang halus (0.2s-0.5s) terasa lebih rapi daripada yang panjang dan dramatis untuk kebanyakan interaksi UI.
- Hormati preferensi pengguna: Gunakan media query prefers-reduced-motion untuk menonaktifkan atau mengurangi animasi bagi pengguna yang menginginkan lebih sedikit gerakan.
- Pilih mode fill yang sesuai: Gunakan "forwards" untuk mempertahankan keadaan akhir, "backwards" untuk menerapkan keyframe pertama selama jeda, atau "both" untuk kontrol penuh.
- Uji di berbagai perangkat: Pratinjau animasi Anda di perangkat seluler tempat performa mungkin berbeda dari browser desktop.