Lompat ke konten
Aback Tools Logo

Generator Keyframe Animasi

Buat animasi CSS @keyframes secara visual dengan generator keyframe interaktif kami. Tambahkan beberapa perhentian keyframe, atur opasitas, posisi, rotasi, skala, dan warna di tiap perhentian - lalu pratinjau animasinya dan salin CSS-nya.

Animation Keyframe Generator
Build CSS @keyframes animations visually. Add keyframe stops, set opacity, transform, and color properties per stop, then preview the animation and copy the CSS.

Preview

Box

Settings

2.0s
infinite

Keyframe Stops (5)

0%
1.00
0px
0px
0°
1.0
25%
0.80
50px
-20px
45°
1.2
50%
1.00
100px
0px
90°
1.0
75%
0.80
50px
20px
45°
1.2
100%
1.00
0px
0px
0°
1.0
@keyframes anim-zlrw {
  0% {
  opacity: 1;
  background-color: #6366f1;
  }

  25% {
  opacity: 0.8;
  transform: translate(50px, -20px) rotate(45deg) scale(1.2);
  background-color: #8b5cf6;
  }

  50% {
  opacity: 1;
  transform: translate(100px, 0px) rotate(90deg);
  background-color: #a855f7;
  }

  75% {
  opacity: 0.8;
  transform: translate(50px, 20px) rotate(45deg) scale(1.2);
  background-color: #d946ef;
  }

  100% {
  opacity: 1;
  background-color: #6366f1;
  }
}

.element {
  animation: anim-zlrw 2s ease-in-out infinite;
  /* Add your element styles here */
}

Mengapa Menggunakan Generator Keyframe Animasi Kami?

  • Pembuat Keyframe Visual: tambahkan dan atur perhentian keyframe pada titik persentase apa pun (0%-100%) dengan antarmuka visual yang intuitif. Setiap perhentian mendukung opasitas, translate (X/Y), rotate, scale, dan background-color - semuanya dapat diatur lewat penggeser dan pemilih warna.
  • Pratinjau Animasi Real-Time: lihat animasi Anda hidup dengan panel pratinjau yang memutar keyframe secara real time. Sesuaikan durasi, easing, dan jumlah iterasi seketika - pratinjau diperbarui tanpa memuat ulang halaman.
  • Keluaran CSS @keyframes Bersih: dapatkan aturan CSS @keyframes yang diformat rapi dengan semua properti animasi Anda. Generator hanya mengeluarkan properti yang benar-benar dipakai - tanpa deklarasi yang tidak perlu. Salin seluruh CSS animasi dengan satu klik.
  • 100% Privat & Gratis: semua pembuatan animasi dan rendering pratinjau terjadi lokal di browser Anda. Tidak ada data yang dikirim ke server, tanpa pendaftaran, dan tanpa batas penggunaan. Pakai untuk proyek apa pun - pribadi, komersial, atau klien.

Kasus Penggunaan Umum Generator Keyframe Animasi

  • Animasi Landing Page: buat animasi masuk yang menarik untuk bagian hero, tombol ajakan bertindak, dan kartu fitur. Gunakan efek fade-in, slide-up, atau scale untuk menarik perhatian ke elemen kunci dan meningkatkan keterlibatan pengguna.
  • Indikator Pemuatan & Progres: rancang animasi pemuatan khusus, indikator progres, dan efek skeleton screen. Animasi keyframe sempurna untuk menciptakan status pemuatan yang menarik perhatian selama konten dimuat.
  • Mikrointeraksi & Umpan Balik: tambahkan umpan balik gerakan halus pada elemen UI seperti tombol, sakelar, dan kolom formulir. Pantulan singkat atau transisi warna saat di-hover atau diklik memberi umpan balik visual yang memuaskan.
  • Navigasi Bergaya Aplikasi Seluler: terapkan transisi navigasi bergaya seluler seperti menu yang meluncur masuk, bottom sheet, dan animasi bilah tab. Animasi keyframe membuat pengalaman web seluler terasa native dan rapi.
  • Animasi Buletin Email: buat animasi CSS untuk buletin yang berfungsi di klien email yang mendukung. Animasi opacity dan transform sederhana dapat membuat kampanye Anda menonjol di kotak masuk yang padat.
  • Prototipe & Pengujian Desain: prototipekan ide animasi dengan cepat selama fase desain tanpa menulis kode. Bereksperimen dengan timing, easing, dan kombinasi properti untuk menemukan gerakan yang pas bagi design system Anda.

Apa Itu Animasi CSS @keyframes?

CSS @keyframes adalah at-rule CSS yang kuat untuk mendefinisikan animasi kompleks dengan menetapkan nilai properti pada berbagai titik (keyframe) sepanjang garis waktu. Berbeda dari transisi CSS yang hanya menganimasikan antara dua keadaan (awal dan akhir), animasi keyframe bisa punya beberapa keadaan antara, memungkinkan urutan gerakan canggih seperti memantul, siklus warna, dan transformasi multi-langkah.

Setiap perhentian keyframe didefinisikan sebagai persentase dari total durasi animasi, dari 0% (awal) hingga 100% (akhir). Di setiap perhentian Anda menetapkan nilai properti CSS yang harus dimiliki elemen pada titik itu. Browser secara otomatis menginterpolasi (menghaluskan) nilai antar perhentian sehingga gerakan menjadi mulus. Anda dapat mengatur fungsi timing per animasi atau per keyframe untuk kontrol tepat atas perilaku easing.

Cara Kerja Generator Keyframe Animasi Kami

Generator kami menyediakan antarmuka visual untuk membuat animasi @keyframes tanpa menulis CSS secara manual. Berikut cara kerjanya:

  1. Tambahkan perhentian keyframe - mulai dengan perhentian default atau pilih animasi preset (Fade In, Slide In, Bounce, Spin & Scale, Color Cycle, Wobble). Setiap perhentian mewakili satu titik pada garis waktu animasi. Anda bisa menambah hingga 10 perhentian dan mengatur posisinya dengan penggeser persentase.
  2. Konfigurasikan properti tiap perhentian - untuk setiap perhentian keyframe, atur opasitas, posisi horizontal dan vertikal (translate), rotasi, skala, dan warna latar dengan penggeser dan pemilih warna. Elemen pratinjau animasi diperbarui secara real time saat Anda menyesuaikan nilai.
  3. Atur parameter animasi - gunakan penggeser durasi (0,1 s hingga 10 s) untuk kecepatan, pilih fungsi easing (Linear, Ease, Bounce, dll.), dan tentukan jumlah iterasi (1-10 atau tak terbatas). Klik Play untuk melihat animasi Anda beraksi, lalu salin CSS yang dihasilkan.

Properti Keyframe Dijelaskan

  • Opacity: mengatur transparansi elemen di setiap perhentian keyframe. Nilainya dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram). Gunakan opacity untuk efek fade-in, fade-out, dan pulsa.
  • Translate X/Y (px): memindahkan elemen secara horizontal dan vertikal dari posisi aslinya. Nilai negatif ke kiri/atas, positif ke kanan/bawah. Kombinasikan dengan transform lain untuk animasi geser, pantul, dan mengambang.
  • Rotate (deg): memutar elemen searah jarum jam (positif) atau berlawanan (negatif) di sekitar pusatnya. Untuk efek berputar, bergoyang, dan berayun. Nilai antara -360 dan 360 derajat didukung.
  • Scale: mengubah ukuran elemen relatif terhadap ukuran aslinya. 1 adalah ukuran normal, 0,5 setengah, dan 2 dua kali lipat. Kombinasikan dengan opacity untuk efek masuk yang dramatis.
  • Warna Latar: menetapkan warna latar elemen di setiap perhentian. Browser menginterpolasi warna dengan mulus, memungkinkan efek siklus warna dan transisi suasana.
  • Urutan transformasi: saat beberapa fungsi transformasi dipakai, semuanya diterapkan berurutan - translate dulu, lalu rotate, lalu scale. Urutan ini memengaruhi hasil visual akhir dan ditangani dengan benar oleh CSS yang dihasilkan.

Privasi, Keamanan & Ketersediaan

Privasi Anda adalah prioritas kami. Generator Keyframe Animasi memproses semuanya lokal di browser Anda memakai rendering CSS bawaan mesin browser. Tidak ada data yang dikirim ke server mana pun - pengaturan animasi dan konfigurasi keyframe Anda tidak pernah meninggalkan perangkat. Alat ini sepenuhnya gratis tanpa pendaftaran, tanpa batas penggunaan, dan tanpa pembatasan tersembunyi. Pakailah dengan yakin untuk proyek pribadi, situs komersial, atau pekerjaan klien.

Pertanyaan yang Sering Diajukan

Transisi CSS menganimasikan antara dua keadaan (awal dan akhir) saat ada pemicu. Animasi CSS @keyframes bisa punya beberapa perhentian antara, memungkinkan urutan kompleks multi-langkah yang dapat berjalan otomatis saat halaman dimuat dengan kontrol iterasi.

Kecepatan diatur oleh properti duration. Gunakan penggeser durasi untuk nilai antara 0,1 s dan 10 s. Fungsi easing juga memengaruhi kecepatan yang dirasakan: ease-in mulai lambat, ease-out berakhir lambat, dan linear menjaga kecepatan konstan.

Fungsi easing mengatur percepatan dan perlambatan antar perhentian keyframe. Linear berarti kecepatan konstan. Ease mulai cepat lalu melambat di tengah. Ease-in mulai lambat dan bertambah cepat. Ease-out mulai cepat dan melambat. Ease-in-out menggabungkan awal dan akhir yang mulus.

Anda bisa menambahkan hingga 10 perhentian keyframe. Dua perhentian (0% dan 100%) adalah minimum untuk animasi sederhana, sedangkan 5-8 perhentian memungkinkan urutan kompleks multi-langkah dengan nilai opasitas, posisi, rotasi, skala, dan warna yang berbeda.

Bisa, CSS yang dihasilkan adalah CSS standar yang berfungsi di semua browser modern (Chrome, Firefox, Safari, Edge, Opera). Untuk performa terbaik, gunakan transform dan opacity untuk animasi mulus 60fps yang memanfaatkan akselerasi GPU.

Iterasi tak terbatas berarti animasi berulang terus-menerus. Ini berguna untuk efek latar, spinner pemuatan, indikator memantul, dan gerakan dekoratif. Anda juga bisa memilih jumlah pengulangan tertentu (1-10) untuk animasi masuk.

Ya, Generator Keyframe Animasi sepenuhnya gratis tanpa batasan. Tanpa pendaftaran, tanpa batas penggunaan, dan tanpa biaya tersembunyi. Semua pemrosesan terjadi lokal di browser Anda.