properti CSS3 transisi
contoh
Arahkan kursor elemen div, dan secara bertahap mengubah lebar tabel dari 100px ke 300px ::
div
{
width: 100px;
transisi: 2s lebar;
-webkit-transition: 2s lebar; / * Safari * /
}
div: hover {width: 300px;}
{
width: 100px;
transisi: 2s lebar;
-webkit-transition: 2s lebar; / * Safari * /
}
div: hover {width: 300px;}
Coba »
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 | 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
Properti transisi adalah properti singkatan memiliki empat atribut: transisi-properti, transisi durasi, transisi-waktu-fungsi, dan transisi-delay.
Catatan: Selalu menentukan properti transisi durasi, jika durasi 0, transisi tidak akan berpengaruh.
| default: | semua 0 kemudahan 0 |
|---|---|
| warisan: | tidak |
| versi: | CSS3 |
| sintaks JavaScript: | objek .style.transition = "2s lebar" |
tatabahasa
transisi: Properti durasi waktu-fungsi delay;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
