Generator Transisi CSS3

Transisi opasitas yang mulus

Preset Populer

Efek Pudar

Transisi opasitas yang mulus

Efek Skala

Ubah ukuran elemen saat mengarahkan kursor

Efek Putar

Putar elemen saat mengarahkan kursor

Efek Geser

Pindahkan posisi elemen

Perubahan Warna

Transisi warna latar belakang

Tentang Transisi

Transisi CSS memungkinkan Anda mengubah nilai properti dengan lancar, selama durasi tertentu.

Properti animasi yang umum meliputi:

  • lebar, tinggi
  • margin, padding
  • opasitas, warna
  • transform (scale, rotate, translate)
  • background-color

Kiat Pro: Gunakan opsi 'Semua Properti' untuk menganimasikan semua perubahan.

Preview

HOVER ME

Kode yang Dihasilkan

.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; }  .element:hover { /* Hover styles will be generated here */ }

Kontrol Transisi

300
0

Efek Kursor

100%
100%
0px
0px
8px
8px

Related Tools