transisi CSS3
transisi CSS3
CSS3, kita harus menambahkan efek yang dapat dikonversi dari satu gaya ke waktu lain, tanpa menggunakan animasi Flash atau JavaScript. Mouse unsur-unsur berikut:
Mouse unsur-unsur berikut:
transisi
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- |
transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Bagaimana cara kerjanya?
CSS3 transisi adalah unsur secara bertahap berubah dari satu gaya ke efek lain.
Untuk mencapai hal ini, dua hal harus didefinisikan:
- Saya ingin menambahkan efek sifat CSS
- Tentukan durasi efek.
contoh
atribut lebar diterapkan efek transisi, durasi 2 detik:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Catatan: Jika Andatidak menentukan batas waktu, transisi tidak akan berpengaruh, karena nilai default adalah 0.
Efeknya akan mengubah nilai perubahan properti CSS yang ditentukan. Perubahan properti CSS khas adalah mouse pengguna lebih dari unsur:
contoh
Ketentuan ketika mouse pointer suspensi (: hover) ke <div> elemen ketika:
{
width: 300px;
}
Coba »
Catatan: Ketika kursor mouse ke elemen, secara bertahap berubah gaya aslinya
Jumlah perubahan
Untuk menambahkan lebih dari satu efek dari gaya perubahan, menambahkan atribut dipisahkan dengan koma:
contoh
Ditambahkan efek lebar, tinggi, dan transisi:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
Coba »
Properti transisi
Tabel berikut ini berisi semua sifat-sifat transisi:
milik | deskripsi | CSS |
---|---|---|
transisi | properti singkat untuk setting empat sifat transisi dalam satu properti. | 3 |
transisi-properti | Nama transisi properti CSS ketentuan berlaku. | 3 |
transisi durasi | Untuk menentukan waktu efek transisi menghabiskan. default adalah 0. | 3 |
transisi-waktu-fungsi | Yang telah ditentukan transisi waktu efek kurva. defaultnya adalah "kemudahan". | 3 |
transisi-delay | Ketentuan kapan mulai efek transisi. default adalah 0. | 3 |
Dua contoh berikut mengatur semua atribut transisi:
contoh
Gunakan semua properti transisi di salah satu contoh:
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
Coba »
contoh
Dan contoh efek transisi yang sama di atas, tetapi menggunakan sifat transisi singkatan:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Coba »