tutorial pengembangan web terbaru
 

Style transition Property

<Style Object

Contoh

Arahkan kursor ke atas elemen div untuk secara bertahap mengubah penampilan:

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

Definisi dan Penggunaan

Properti transisi adalah properti singkatan untuk empat sifat transisi:

transitionProperty, transitionDuration, transitionTimingFunction, dan transitionDelay.

Note: Selalu menentukan properti transitionDuration, jika durasi adalah 0, dan transisi tidak akan berpengaruh.


Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Properti transisi didukung di Internet Explorer 10, Firefox, Opera, dan Chrome.

Safari mendukung alternatif, properti WebkitTransition.

Catatan: Properti transisi tidak didukung di Internet Explorer 9 dan versi sebelumnya.

Sintaksis

Kembali properti transisi:

object .style.transition

Mengatur properti transisi:

object .style.transition=" Nilai properti
Nilai Deskripsi
transitionProperty Menentukan nama properti CSS efek transisi untuk
transitionDuration Menentukan berapa detik atau milidetik efek transisi diperlukan untuk menyelesaikan
transitionTimingFunction Menentukan kurva kecepatan efek transisi
transitionDelay Mendefinisikan ketika efek transisi akan mulai
initial Set properti ini ke nilai default. Baca tentang awal
inherit Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi

Rincian teknis

Nilai default: semua 0 kemudahan 0
Kembali Nilai: Sebuah String, yang mewakili properti transisi dari elemen
CSS Versi CSS3

Pages terkait

Referensi CSS: transition property


<Style Object