sifat transition CSS

Definisi dan Penggunaan

Sifat transisi adalah sifat singkat yang digunakan untuk mengatur empat sifat transisi:

Keterangan:Selalu atur transition-duration Jika sifat tidak disetel, lama transisi adalah 0, maka efek transisi tidak akan terjadi.

Lihat Juga:

Panduan CSS:Transisi CSS

Panduan HTML DOM:Sifat transisi

Contoh

Taruh penuding kursor di elemen div, lebar akan berubah dari 100px hingga 300px:

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

Coba Sendiri

Syarat CSS

transition: property duration timing-function delay;

Nilai Sifat

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

Detil Teknologi

Nilai Default: all 0 mudah 0
Inheritance: tidak
Versi: CSS3
Syarat JavaScript: objek.style.transition="lebar 2s"

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung sifat ini sepenuhnya.

Angka yang dibawa -webkit-、-moz- atau -o- menunjukkan versi pertama yang digunakan prefix.

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-