Pembuat Animasi Sprite CSS
Buat kode animasi CSS secara otomatis
dari beberapa gambar atau sprite sheet
📏 Pengaturan Grid
⚙️ Pengaturan Animasi
🎞️ Urutan Frame
Seret untuk mengurutkanAnda mungkin juga suka
Tentang Pembuat Animasi Sprite
Pembuat Animasi Sprite CSS adalah alat online gratis yang secara otomatis menghasilkan kode CSS untuk animasi menggunakan properti animation dan fungsi steps(), dari beberapa gambar frame atau sprite sheet yang sudah ada.
Tidak seperti animasi GIF, sprite CSS menawarkan kualitas gambar tinggi tanpa degradasi. Mereka memungkinkan Anda untuk secara fleksibel mengontrol kecepatan pemutaran, arah, dan iterasi secara langsung melalui CSS. Selain itu, mereka dengan indah mempertahankan area semi-transparan (saluran alfa).
Semuanya mulai dari pemuatan gambar hingga penggabungan dan pembuatan kode CSS diproses seluruhnya di dalam browser Anda. Gambar Anda tidak pernah diunggah ke server, memastikan pengalaman yang cepat dan aman.
Cara Membuat Animasi Sprite CSS
Unggah Gambar
Pilih sprite sheet yang sudah digabung, atau unggah beberapa gambar frame untuk digabungkan menjadi satu sheet.
Sesuaikan Animasi
Sambil memeriksa pratinjau, konfigurasikan jumlah kolom dan baris, kecepatan pemutaran, dan arah.
Dapatkan Kode
Unduh gambar sprite sheet dan salin kode CSS/HTML yang dihasilkan ke proyek Anda.
Penjelasan Properti CSS
Cara Kerja CSS animation + steps()
Fungsi steps() digunakan dalam properti CSS animation-timing-function. Sementara animasi normal menginterpolasi nilai dengan mulus, steps() mengubah nilai dalam penambahan diskrit (bertingkat).
Dalam animasi sprite, properti ini digunakan untuk menggeser background-position seketika selebar satu frame.
| Properti | Deskripsi | Peran di Sprite |
|---|---|---|
| animation-timing-function | Kurva timing animasi | Menyetel steps(N) mencegah transisi mulus. |
| background-position | Posisi awal gambar latar belakang | Dimodifikasi dalam @keyframes untuk menggeser frame. |
| animation-duration | Waktu yang dibutuhkan untuk satu siklus | Menentukan kecepatan pemutaran (FPS). |
Glosarium Animasi
- Sprite Sheet
- Satu gambar besar yang berisi beberapa gambar kecil (frame) yang disusun dalam grid. Ini mengurangi permintaan HTTP.
- Fungsi steps()
- Fungsi CSS yang mengubah nilai dalam langkah diskrit alih-alih mulus. Penting untuk membuat animasi sprite CSS.
- @keyframes
- Aturan CSS yang digunakan untuk menentukan keadaan perantara selama animasi.
- background-position
- Properti CSS yang menentukan posisi awal latar belakang. Menggeser nilai ini menampilkan frame yang berbeda.
- Saluran Alfa (Alpha Channel)
- Bagian data gambar yang menentukan transparansi. Menggunakan PNG memungkinkan gradien semi-transparan yang indah.
Pertanyaan yang Sering Diajukan
- T.Apakah gambar saya disimpan ke server?
- Tidak. Alat ini memproses semua gambar sepenuhnya di dalam browser Anda. Tidak ada data yang dikirim ke server eksternal, sehingga aman untuk gambar rahasia.
- T.Apa perbedaan antara animasi GIF dan sprite CSS?
- GIF memiliki batas 256 warna dan kurang transparansi semi. Sprite CSS menggunakan PNG untuk visual berkualitas tinggi dan menawarkan kontrol CSS penuh.
- T.Bisakah saya menggabungkan gambar dengan ukuran berbeda?
- Setiap frame harus memiliki dimensi yang sama. Jika berbeda, alat akan menyesuaikannya berdasarkan gambar pertama yang dapat menyebabkan pemotongan.
- T.Bagaimana cara memperbaiki gambar buram di layar Retina?
- Buat sprite sheet Anda dua kali lipat ukuran yang diinginkan, lalu gunakan properti CSS
background-sizeuntuk memperkecilnya. - T.Apakah ada ukuran maksimum yang disarankan?
- Kami sarankan untuk menjaga dimensi di bawah 2048x2048 piksel agar tidak membebani memori, terutama di ponsel.
Kasus Penggunaan
Animasi Pemuatan
Ideal untuk membuat spinner kustom yang berjalan efisien melalui CSS dengan desain semi-transparan.
Pergerakan Karakter (Game UI)
Buat loop aksi seperti "berjalan" untuk karakter game browser dengan mudah.
Ikon UI Interaktif
Buat perubahan ikon dinamis yang dipicu saat mengarahkan kursor atau mengklik.
Iklan Banner Berkualitas
Efektif untuk banner iklan animasi yang membutuhkan resolusi tinggi tanpa ukuran file besar.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.