Lewati ke konten utama
iotools.cloudiotools.cloud

Pembuat Animasi Keyframe CSS

Buat animasi CSS @keyframes dari preset siap pakai (memantul, guncangan, denyutan, memudar masuk, geser masuk, putar, ayunan, pita karet, kilatan, goyangan) dengan durasi, easing, penundaan, jumlah iterasi, dan arah — salin keyframe plus shorthand animasi untuk menerapkannya.

Input

Panjang satu siklus animasi, dalam detik.

Waktu menunggu sebelum animasi dimulai.

A positive whole number, or "infinite" to loop forever.

Output

CSS
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-keyframe-animation-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "animationType": "fadeIn",
    "duration": "1",
    "timingFunction": "ease-in-out",
    "delay": "0",
    "iterationCount": "1",
    "direction": "normal"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-keyframe-animation-generator` tool (CSS Keyframe Animation Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-keyframe-animation-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Pembuat Animasi Keyframe CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Animasi keyframe CSS menentukan bagaimana gaya elemen berubah selama siklus animasi, menggunakan at-rule @keyframes untuk mendeskripsikan serangkaian langkah (0% hingga 100%) dan properti shorthand animation untuk menerapkan langkah-langkah tersebut ke elemen dengan durasi, easing, penundaan, jumlah perulangan, dan arah. Animasi keyframe adalah yang memungkinkan tombol berdenyut, kartu memudar masuk, atau ikon notifikasi berguncang — semuanya tanpa JavaScript, dan berjalan di thread compositor browser untuk gerakan yang mulus dan efisien.

Pembuat ini membangun kedua bagian untuk Anda: blok @keyframes dengan hentian persentase dan properti yang benar untuk preset yang dipilih, dan aturan .animated-element { animation: ...; } yang cocok yang menerapkannya. Salin keduanya ke stylesheet Anda dan ganti .animated-element dengan pemilih Anda sendiri.

Cara menggunakannya

  1. Pilih preset — Memantul, Guncangan, Denyutan, Memudar Masuk, Geser Masuk Kiri, Putar, Ayunan, Pita Karet, Kilatan, atau Goyangan. Setiap preset adalah urutan langkah transform/opacity siap pakai yang dimodelkan pada efek terkenal yang dipopulerkan oleh library animasi seperti Animate.css.
  2. Atur durasi dalam detik — berapa lama satu siklus penuh berlangsung.
  3. Pilih fungsi waktu — ease, ease-in, ease-out, ease-in-out, atau linear — untuk mengontrol kurva akselerasi.
  4. Atur penundaan dalam detik jika Anda ingin animasi menunggu sebelum dimulai.
  5. Atur jumlah iterasi — angka bulat seperti 1 atau 3, atau infinite untuk berulang selamanya.
  6. Pilih arah — normal memutar maju setiap siklus, reverse memutar mundur, alternate membalik arah setiap siklus lainnya, dan alternate-reverse dimulai terbalik dan membalik.
  7. Salin CSS yang dihasilkan dan tempelkan ke stylesheet Anda, atau unduh sebagai file .css.

FAQ

Mengapa pemilih .animated-element? Ini adalah placeholder sehingga CSS siap ditempel — ganti namanya agar sesuai dengan elemen yang ingin Anda animasikan (class, ID, atau pemilih apa pun).

Bisakah saya menggunakan preset ini dengan elemen HTML apa pun? Ya. Animasi @keyframes berlaku untuk elemen apa pun melalui properti animation; beberapa preset (seperti Geser Masuk Kiri) terlihat terbaik pada elemen tingkat blok dengan dimensi yang ditentukan.

Apa perbedaan antara iteration-count: infinite dan angka? Angka menjalankan animasi berkali-kali kemudian berhenti di frame terakhirnya (kecuali animation-fill-mode mengatakan sebaliknya). infinite berulang selamanya — berguna untuk pemuat dan spinner seperti preset Putar.

Apakah animasi ini mempengaruhi kinerja halaman? Menganimasi transform dan opacity (yang digunakan setiap preset di sini) dipercepat GPU di browser modern dan merupakan pendekatan yang direkomendasikan untuk animasi CSS yang mulus — lebih murah daripada menganimasi properti tata letak seperti width, top, atau margin.

Bisakah saya menggabungkan beberapa preset pada satu elemen? Tidak secara langsung dalam alat ini, tetapi Anda dapat mencantumkan nilai shorthand animation yang dipisahkan koma ganda dengan tangan setelah memiliki dua blok yang dihasilkan, selama nama @keyframes mereka tidak bertabrakan.

Privasi

Semuanya berjalan secara lokal di browser Anda — pengaturan Anda tidak pernah meninggalkan perangkat Anda, dan tidak ada CSS yang dikirim ke server untuk dihasilkan.

csskeyframesanimationgeneratortransitionweb design

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan