CSS Keyframe Animation Studio
Menghasilkan animasi CSS yang lancar untuk terapung, denyutan, melantun, bergoyang, dan putaran dengan kawalan tempoh dan bingkai kunci.
Berjalan dalam pelayar anda. Fail anda tidak pernah meninggalkan peranti. Lihat cara menyemaknya
…
Cara melakukannya
- 1Langkah 1: buka CSS Keyframe Animation Studio dan masukkan data anda
Taip nombor atau teks anda, tambah fail, atau pilih pilihan yang diperlukan. Tiada apa-apa dimuat naik: semuanya kekal dalam pelayar anda.
- 2Langkah 2: apa yang dilakukan CSS Keyframe Animation Studio
Menghasilkan animasi CSS yang lancar untuk terapung, denyutan, melantun, bergoyang, dan putaran dengan kawalan tempoh dan bingkai kunci.
- 3Langkah 3: baca keputusan dan bandingkan
Keputusan muncul serta-merta. Ubah satu nilai untuk melihat bagaimana jawapan berubah, kemudian simpan angka yang sesuai dengan kes anda.
- 4Langkah 4: salin atau simpan
Salin keputusan atau muat turun. Untuk keputusan penting, sahkan dengan sumber rasmi atau penasihat.
Tentang alat ini
Berikan nafas kehidupan kepada butang, lencana wira, ikon pemberitahuan dan penunjuk muat. Pilih dari preset animasi UI yang popular termasuk Gentle Float, Attention Pulse, Playful Bounce, Error Shake, dan Infinite Spin. Sesuaikan tempoh main dalam saat dan salin kod keyframe CSS siap pengeluaran.
Petua untuk hasil terbaik
Sebelum bermula, luangkan seketika untuk membaca pilihan dan cuba alat dengan contoh kecil dahulu. Semuanya berjalan dalam pelayar pada peranti anda sendiri; tiada apa yang anda taip atau tambah dimuat naik dan menutup tab memadam semuanya. Jika sesuatu tidak kelihatan betul, muat semula halaman dan cuba lagi atau gunakan pautan laporan pada halaman ini untuk memberitahu kami apa yang tidak kena. Jika hasil masih kelihatan salah, ubah satu nilai pada satu masa untuk melihat ruang mana yang paling berpengaruh. Tanda halaman ini jika anda akan menggunakannya semula.
Ringkasnya
- Kategori: Imej
- Berjalan dalam pelayar, tanpa pendaftaran, tanpa muat naik.
- Maklumat yang anda masukkan kekal pada peranti anda.
- Tersedia dalam banyak bahasa.
- Kandungan disemak kali terakhir:
Soalan lazim
Adakah animasi CSS ini dipercepatkan oleh perkakasan?
Yes. Animations utilize `transform: translate()` and `transform: scale()`, which run on the GPU via compositor threads without layout thrashing.
Boleh saya menyesuaikan kelajuan animasi?
Ya, penyeluncur tempoh membolehkan anda mempercepat atau melambatkan animasi dari 0.5 saat ke 4.0 saat secara real time.
Bagaimana saya mencetuskan animasi hanya pada hover?
In your CSS, attach the `animation:` property inside a `:hover` pseudo-class (e.g., `.button:hover ( animation: pulse 1s infinite; )`).
Adakah ini memerlukan perpustakaan JavaScript?
Tidak, animasi yang dihasilkan adalah 100% CSS murni, memerlukan overhead JavaScript sifar.