CSS3 properti transisi-properti
contoh
Arahkan kursor elemen div, dan secara bertahap mengubah lebar tabel:
div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
Coba »
Di bagian bawah halaman ini untuk lebih banyak contoh.
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.
| 属性 | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Definisi atribut dan petunjuk
atribut transisi-properti menentukan efek CSS properti nametransition (akan mulai ditentukan CSS perubahan properti saat efek transisi).
Tip: efek transisi, biasanya terjadi ketika pengguna melayang di atas sebuah elemen.
Catatan: Selalu menentukan properti transisi durasi, jika durasi 0, transisi tidak akan berpengaruh.
| default: | semua |
|---|---|
| warisan: | tidak |
| versi: | CSS3 |
| sintaks JavaScript: | keberatan .style.transitionProperty = "lebar, tinggi" |
tatabahasa
transition-property: none|all|
property;
| nilai | deskripsi |
|---|---|
| tak satupun | Tidak ada properti mendapatkan transisi. |
| semua | Semua properti akan menerima efek transisi. |
| milik | Definisi menerapkan efek transisi properti CSS daftar nama yang dipisahkan dengan koma. |
contoh yang lebih
efek transisi - untuk mengubah kedua properti
Arahkan kursor elemen div, mengubah lebar dan tinggi dengan efek transisi yang mulus.