CSS Transition Generator

Configure CSS transitions with hover preview.

Transisi 1

properti

durasi

fungsi-waktu

penundaan

Pratinjau langsung — arahkan kursor ke kotak

Arahkan ke saya

CSS yang dihasilkan

.element {
  transition: all 0.3s ease 0s;
}

.element:hover {
  /* apply your hover styles here */
}

Tentang alat ini

Generator Transisi CSS memungkinkan Anda mengkonfigurasi properti singkat transition dengan mengatur properti target, durasi, fungsi waktu, dan penundaan. Pratinjau interaktif memperlihatkan perilaku sebelum menyalin kode.

Transisi CSS membuat perubahan status yang halus antara dua nilai CSS, dipicu oleh kelas semu seperti :hover, :focus, atau perubahan kelas melalui JavaScript.

Cara penggunaan

Pilih properti CSS untuk ditransisikan (atau gunakan all).
Atur durasi — berapa lama transisi berlangsung (mis., 0.3s).
Pilih fungsi waktu untuk mengontrol kurva akselerasi.
Opsional tambahkan penundaan sebelum transisi dimulai.
Arahkan kursor ke kotak pratinjau untuk melihat efek secara langsung, lalu salin CSS.

Kasus penggunaan

Pengembang menggunakan transisi untuk efek hover tombol, zoom kartu, dan perubahan warna pada tautan navigasi. Desainer formulir menggunakannya untuk gaya fokus input.

Pertanyaan umum

Apa perbedaan antara transition dan animation? — Transisi bereaksi terhadap perubahan status (seperti hover); animasi berjalan secara otomatis atau berulang menggunakan keyframe.
Bisakah saya mentransisikan beberapa properti? — Ya. Klik Tambah transisi untuk menambahkan beberapa aturan properti yang dipisahkan koma.
Properti mana yang dapat ditransisikan? — Sebagian besar properti dengan nilai numerik: opacity, color, transform, dimensi, dll. Properti seperti display tidak dapat ditransisikan.