Langkau ke kandungan utama
Uddatak

Penjana Animasi Keyframe CSS

Penjana Animasi Keyframe CSS membenarkan anda memilih jenis animasi daripada 12 gaya sedia ada (fade in/out, slide in dari keempat-empat arah, zoom in/out, bounce in, rotate in, flip pada paksi X atau Y), kemudian melaraskan tempoh, kelewatan, fungsi masa, dan bilangan ulangan, dengan pratonton langsung dan butang Replay. Salin keseluruhan peraturan @keyframes berserta kelas animasi yang sedia digunakan. Semua penjanaan berlaku dalam pelayar anda — tiada apa-apa pernah dimuat naik ke mana-mana pelayan.

Alat Reka Bentuk dan CSS Berjalan sepenuhnya dalam pelayar anda

Kod dijana sepenuhnya dalam pelayar anda — tiada apa-apa yang dihantar ke pelayan.

Kod CSS

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

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

Soalan Lazim

Ya, @keyframes dan sifat animation disokong dalam setiap pelayar moden tanpa memerlukan prefix vendor khas.

Teruskan dengan

Sepenuhnya tempatan

Penjana Easing Cubic Bezier

Seret dua titik untuk mereka lengkung easing gerakan tersuai secara visual dan salin kod cubic-bezier.

Alat Reka Bentuk dan CSSBuka alat
Sepenuhnya tempatan

Penjana Gradien CSS

Bina gradien CSS linear atau radial secara visual dan salin kodnya.

Alat Reka Bentuk dan CSSBuka alat
Sepenuhnya tempatan

Penjana Clip-Path CSS

Pilih bentuk sedia ada (bulatan, segi tiga, bintang, gelembung mesej...) dan salin kod CSS clip-path.

Alat Reka Bentuk dan CSSBuka alat

Alat berkaitan

Sepenuhnya tempatan

Penjana Harmoni Palet Warna

Pilih warna asas dan dapatkan palet warna harmoni (komplementari, analog, triadik, tetradik, monokromatik).

Alat Reka Bentuk dan CSSBuka alat
Sepenuhnya tempatan

Penjana Mesh Gradient

Cipta latar belakang mesh gradient berbilang titik yang lembut dengan sekali klik, dan salin kod CSS yang sedia digunakan.

Alat Reka Bentuk dan CSSBuka alat
Sepenuhnya tempatan

Penyemak Kontras Warna

Semak sama ada gabungan warna teks dan latar belakang memenuhi piawaian kontras aksesibiliti WCAG.

Alat Reka Bentuk dan CSSBuka alat
Sepenuhnya tempatan

Penjana Gradien CSS

Bina gradien CSS linear atau radial secara visual dan salin kodnya.

Alat Reka Bentuk dan CSSBuka alat
Sepenuhnya tempatan

Penjana Box Shadow CSS

Reka bayang-bayang box-shadow CSS secara visual menggunakan slider dan salin kod yang dijana.

Alat Reka Bentuk dan CSSBuka alat

Ingin mencuba Uddatak?

Layari perpustakaan alat yang lengkap dan mula gunakan apa yang anda perlukan sekarang — percuma, tanpa pendaftaran.

Lihat semua alat