Pembuat animasi CSS
Sesuaikan preset gerak atau keyframe lalu putar animasinya untuk memeriksanya. Dapatkan CSS untuk dipakai di halaman web beserta contoh penggunaan HTML.
Yang dapat Anda lakukan
Sesuaikan gerakan dari sebuah preset
Pilih dari 12 jenis, termasuk efek masuk, keluar, dan rotasi. Ubah durasi dan pengulangan sesuai kebutuhan Anda.
Edit juga kondisi di antaranya
Tentukan gerakan, rotasi, skala, dan opasitas untuk setiap keyframe lalu periksa gerakan yang dibuat.
Dapatkan CSS dan HTML
Salin atau simpan CSS animasi beserta contoh penggunaan HTML dengan kelas yang sama.
Cara penggunaan
Pilih sebuah preset
Pilih gerakan yang Anda inginkan dan atur durasi untuk 1 kali pemutaran. Memilih preset lain juga akan mengganti pengaturan apa pun yang sudah Anda sesuaikan.
Sesuaikan hanya bagian yang Anda perlukan
Buka detail pemutaran atau keyframe untuk mengubah gerakan di antaranya, arah, pengulangan, dan pengaturan lainnya.
Buat dan putar
Periksa dengan “Buat CSS dan pratinjau”. Jika Anda mengubah pengaturan apa pun, buat lagi.
Dapatkan CSS dan HTML
Terapkan CSS dan tambahkan kelas toollet-motion ke elemen HTML. Gunakan contoh penggunaan HTML bersama CSS-nya.
Berguna ketika
Buat animasi masuk
Gunakan preset fade-in atau entrance-from-below untuk menyesuaikan gerakan dan kecepatan masuk.
Gerakan saat berinteraksi dengan tombol
Ubah kondisi mulai menjadi hover atau fokus keyboard untuk membuat gerakan yang merespons interaksi.
Memahami keyframe dan kondisi pemutaran
Kondisi di antaranya dan durasi
Persen pada keyframe menunjukkan posisinya dalam 1 kali pemutaran. Untuk animasi 1 detik, 50% berarti pada detik ke-0,5. Easing menentukan bagaimana nilai berubah di antara keyframe.
Perpindahan, rotasi, dan tampilan
Posisi horizontal/vertikal adalah besarnya perpindahan dari posisi asli. Skala 1 berarti ukuran asli; opasitas 0 berarti transparan dan 1 berarti pekat.
Penundaan, pengulangan, dan arah
Penundaan ditambahkan hanya sekali sebelum pemutaran dimulai. Untuk pemutaran berhingga, waktu totalnya adalah penundaan + durasi 1 kali pemutaran × jumlah pengulangan. Alternating beralih antara arah maju dan mundur.
Kondisi sebelum dan sesudah pemutaran
Pilih kondisi mana yang tampil selama penundaan dan setelah pemutaran berakhir. Pengaturan reverse dan alternating mengubah posisi keyframe mana yang dipakai pada awal dan akhir pemutaran.
Pengaturan reduced motion
CSS yang dibuat mendukung pengaturan reduced motion di perangkat Anda. CSS ini menghentikan animasi dan memakai kondisi batas yang ditentukan oleh arah dan jumlah pengulangan yang dikonfigurasi. Untuk pemutaran tanpa batas, CSS ini memakai batas dari pemutaran pertama.
Pertanyaan yang sering diajukan
Bisakah saya memutarnya hanya sekali?
Matikan “Ulangi terus” dan atur jumlah pengulangan ke 1. Preset standar dimulai dengan 1 kali pemutaran, sedangkan rotasi dan melayang dimulai dengan pengulangan terus-menerus aktif.
Elemen mana yang harus saya beri CSS ini?
Tambahkan kelas toollet-motion ke elemen HTML dan gunakan bersama CSS yang dibuat. Contoh penggunaan HTML adalah fragmen elemen button, bukan halaman web utuh yang berdiri sendiri.
Berapa banyak keyframe yang bisa saya buat?
Anda dapat memiliki 2–8 keyframe, termasuk awal pada 0% dan akhir pada 100%. Menambahkan keyframe akan menempatkannya di titik tengah interval terlebar. Awal dan akhir tidak dapat dihapus, dan hanya posisi persennya yang tetap.
Pratinjau menghilang setelah saya mengubah pengaturan.
Hasil dihapus saat pengaturan berubah supaya Anda tidak tanpa sengaja memakai gerakan atau kode dari pengaturan sebelumnya. Buat lagi untuk memeriksa pengaturan saat ini.
Mengapa pratinjau tidak bergerak?
Gerakan berhenti ketika opsi reduced motion diaktifkan di perangkat Anda. Untuk pengaturan hover dan focus, periksa juga kondisi mulainya. Pratinjau berhenti sejenak saat Anda beralih ke tab lain.
Bisakah saya memakai beberapa animasi pada halaman yang sama?
Nama kelas dan keyframe yang dibuat dipakai bersama. Untuk memakai animasi terpisah, ubah kedua nama pada tiap animasi dan sesuaikan perubahan itu pada HTML terkait.
Input dan hasil
- Pengaturan
- 12 preset, 2–8 keyframe, dan durasi 0,2–60 detik.
- Pemutaran
- Penundaan 0–60 detik, 1–100 kali pengulangan atau pengulangan tanpa batas, easing, arah, kondisi sebelum dan sesudah pemutaran, serta kondisi mulai.
- Keluaran
- CSS dan contoh penggunaan HTML. Hanya gerakannya yang ditentukan; halaman web utuh atau berkas video tidak dibuat.