LocalToolsKumpulan alat browser offline

Kategori: Alat pengembang

Generator Keyframes CSS

Ide kami sendiriAlatnya tidak ada?

Pilih preset animasi dan salin blok @keyframes-nya

Pilih preset fade, slide, bounce, pulse, atau spin, atur durasi, fungsi pengaturan waktu, jumlah iterasi, dan arahnya, lalu salin blok @keyframes lengkap beserta singkatan animation yang memakainya, dengan pratinjau langsung.

Keluaran
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

Pratinjau dimulai ulang setiap kali Anda mengganti preset, memakai CSS persis seperti yang ditampilkan di bawah.

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

Menulis blok @keyframes secara manual berarti menamai titik henti persentase dan menentukan nilai properti di tiap titik agar berinterpolasi sesuai harapan, yang mudah salah secara halus untuk sesuatu seperti bounce dengan beberapa titik henti. Alat ini menyediakan beberapa bentuk animasi umum sebagai daftar titik henti siap pakai, dan membiarkan Anda mengatur kontrol pengaturan waktu yang tidak mengubah keyframes itu sendiri, sehingga pratinjaunya selalu cocok persis dengan blok CSS di bawahnya.

Cara memakainya

  1. Pilih sebuah preset animasi.
  2. Atur durasi, fungsi pengaturan waktu, jumlah iterasi, dan arahnya.
  3. Salin blok @keyframes dan singkatan animation di bawahnya.

Privasi

Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.

Pertanyaan yang sering diajukan

Kenapa pratinjaunya dimulai ulang saat saya mengganti preset?
Mengganti preset menukar titik henti @keyframes yang mendasarinya, jadi elemen pratinjaunya dipasang ulang untuk memastikan animasi yang berjalan cocok dengan yang baru saja dihasilkan alih-alih menyelesaikan animasi yang sudah usang.
Apa yang dilakukan jumlah iterasi "infinite"?
Ini mengulang animasinya selamanya, yang dipakai pratinjau secara bawaan; atur sebuah angka jika Anda ingin animasinya diputar sejumlah kali tertentu lalu berhenti.
Apakah ada yang dikirim ke server?
Tidak. Blok @keyframes dan singkatan animation-nya dibangun di halaman dari pilihan preset dan pengaturan waktu Anda, itu sebabnya pratinjaunya berubah seketika.

Kembali ke semua alat