Transisi CSS3
Transisi CSS3 memungkinkan Anda untuk mengubah nilai properti (dari satu nilai yang lain), selama durasi tertentu.
Cara Menggunakan CSS3 Transisi?
Untuk membuat efek transisi, Anda harus menentukan dua hal:
- properti CSS Anda tambahkan efek
- durasi efeknya
Catatan: Jika bagian durasi tidak ditentukan, transisi tidak akan berpengaruh, karena nilai default adalah 0.
Contoh berikut menunjukkan 100px * 100px merah <div> elemen. <Div> elemen juga telah menetapkan efek transisi untuk properti lebar, dengan durasi 2 detik:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
Efek transisi akan dimulai ketika properti CSS yang ditentukan (lebar) perubahan nilai.
Sekarang, mari kita tentukan nilai baru untuk properti lebar ketika mouse pengguna atas <div> elemen:
div:hover {
width: 300px;
}
Perhatikan bahwa ketika mouse kursor keluar dari elemen, itu akan secara bertahap berubah kembali ke gaya aslinya.
Ubah Beberapa Nilai Properti
Contoh berikut menambahkan efek transisi untuk kedua lebar dan properti tinggi, dengan durasi 2 detik untuk lebar dan 4 detik untuk ketinggian:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
Tentukan Curve Kecepatan Transisi
Properti transition-timing-function menentukan kurva kecepatan efek transisi.
Properti transition-timing-function dapat memiliki nilai berikut:
- ease - menentukan efek transisi dengan awal yang lambat, kemudian cepat, kemudian berakhir perlahan (ini adalah default)
- linear - menentukan efek transisi dengan kecepatan yang sama dari awal sampai akhir
- ease-in - menentukan efek transisi dengan awal yang lambat
- ease-out - menentukan efek transisi dengan ujung yang lambat
- ease-in-out - menentukan efek transisi dengan awal yang lambat dan akhir
- kubic-bezier (n, n, n, n) - memungkinkan Anda menentukan nilai-nilai Anda sendiri dalam fungsi kubic-bezier
Contoh berikut menunjukkan beberapa kurva kecepatan yang berbeda yang dapat digunakan:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Menunda Efek Transisi
Transition-delay properti menetapkan penundaan (dalam detik) untuk efek transisi.
Contoh berikut memiliki delay 1 detik sebelum awal:
div {
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
Transisi + Transformasi
Contoh berikut juga menambahkan transformasi efek transisi:
div {
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
0 komentar:
Posting Komentar