Properti Style transition

Definisi dan penggunaan

transition Properti ini adalah singkatan untuk empat properti transisi:

Keterangan:Selalu tentukan Properti transitionDurationJika tidak, durasi adalah 0, transisi akan tak ber efek.

Lihat juga:

Panduan CSS:Properti transition

Contoh

Tahan mouse di atas elemen div untuk mengubah penampilannya secara perlahan:

document.getElementById("myDIV").style.transition = "all 2s";

Coba sendiri

Sintaks

Kembalikan properti transition:

object.style.transition

Atur properti transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

Nilai properti

Nilai Deskripsi
transitionProperty Tentukan nama properti CSS yang dipengaruhi efek transisi.
transitionDuration Tentukan berapa lama (dalam detik atau milidetik) yang diperlukan untuk efek transisi untuk selesai.
transitionTimingFunction Tentukan garis waktu efek transisi.
transitionDelay Mendefinisikan kapan efek transisi mulai.
initial Atur properti ini ke nilai standarnya. Lihat initial.
inherit Mengambil properti ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai standar: all 0 ease 0
Nilai kembalian: String, menunjukkan elemen Properti transition.
Versi CSS: CSS3

Dukungan browser

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1