Lewati ke konten utama
Uddatak

Pembuat Animasi CSS Keyframe

Pembuat Animasi CSS Keyframe memungkinkan Anda memilih jenis animasi dari 12 gaya siap pakai (fade in/out, geser dari empat arah, zoom in/out, memantul masuk, putar masuk, balik pada sumbu X atau Y), lalu menyesuaikan durasi, penundaan, fungsi waktu, dan jumlah pengulangan, dengan pratinjau langsung dan tombol Putar Ulang. Salin aturan @keyframes lengkap beserta kelas animasi siap pakai. Semua pembuatan terjadi di peramban Anda — tidak ada yang pernah diunggah ke server.

Alat Desain dan CSS Berjalan sepenuhnya di browser Anda

Kode dibuat sepenuhnya di peramban Anda — tidak ada yang pernah dikirim ke server.

Kode CSS

@keyframes uddatakAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animated-box {
  animation: uddatakAnim 800ms ease-out 0ms 1;
}

Pertanyaan yang Sering Diajukan

Ya, @keyframes dan properti animation didukung di semua peramban modern tanpa memerlukan prefiks khusus.

Lanjutkan dengan

Sepenuhnya lokal

Generator Kurva Easing Cubic Bezier

Seret dua titik untuk merancang kurva easing gerakan kustom secara visual dan salin kode cubic-bezier.

Alat Desain dan CSSBuka alat
Sepenuhnya lokal

Generator Gradien CSS

Buat gradien CSS linear atau radial secara visual dan salin kodenya.

Alat Desain dan CSSBuka alat
Sepenuhnya lokal

Generator Clip-Path CSS

Pilih bentuk siap pakai (lingkaran, segitiga, bintang, gelembung pesan...) dan salin kode clip-path.

Alat Desain dan CSSBuka alat

Alat terkait

Sepenuhnya lokal

Pembuat Harmoni Palet Warna

Pilih warna dasar dan dapatkan palet warna yang harmonis (komplementer, analog, triadik, tetradik, monokromatik).

Alat Desain dan CSSBuka alat
Sepenuhnya lokal

Pembuat Gradasi Mesh

Buat latar belakang gradasi mesh multi-titik yang lembut dengan satu klik, dan salin kode CSS siap pakai.

Alat Desain dan CSSBuka alat
Sepenuhnya lokal

Pemeriksa Kontras Warna

Periksa apakah pasangan warna teks/latar belakang memenuhi standar kontras aksesibilitas WCAG.

Alat Desain dan CSSBuka alat
Sepenuhnya lokal

Generator Gradien CSS

Buat gradien CSS linear atau radial secara visual dan salin kodenya.

Alat Desain dan CSSBuka alat
Sepenuhnya lokal

Generator Box-Shadow CSS

Desain box-shadow CSS secara visual dengan penggeser dan salin kode yang dihasilkan.

Alat Desain dan CSSBuka alat

Siap mencoba Uddatak?

Jelajahi seluruh pustaka alat dan mulai gunakan apa yang Anda butuhkan sekarang — gratis, tanpa pendaftaran.

Jelajahi semua alat