Properti transition CSS

Definisi dan Penggunaan

Properti transition adalah properti singkat yang digunakan untuk mengatur empat properti transisi:

Keterangan:Selalu atur transition-duration Jika tidak disetel properti, waktu transisi akan 0, dan efek transisi tidak akan terjadi.

Lihat Juga:

Panduan CSS:Transisi CSS

Panduan Referensi DOM HTML:Properti transition

Contoh

Pindahkan penunjuk mouse ke elemen div, lebarnya akan berubah dari 100 px ke 300 px secara perlahan:

div {
  lebar: 100 px;
  transition: lebar 2 detik;
}

Coba Sendiri

Grammar CSS

transition: property duration timing-function delay;

Nilai Properti

Nilai Deskripsi
transition-property Menentukan nama properti CSS yang disetel untuk efek transisi.
transition-duration Menentukan berapa lama atau milidetik yang dibutuhkan untuk menyelesaikan efek transisi.
transition-timing-function Menentukan garis lurus kecepatan efek kecepatan.
transition-delay Mendefinisikan kapan efek transisi dimulai.

Detil Teknik

Nilai standar: all 0 lancar 0
Inheritance: tidak
Versi: CSS3
Grammar JavaScript: objek.style.transition="lebar 2 detik"

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung properti ini penuh.

Angka yang diikuti dengan -webkit-, -moz-, atau -o- menunjukkan versi awal penggunaan awalan.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-