CSS3 : Transition Property Basics untuk Blogger - Halo sobat, Sobat dapat melihat di berbagai efek blog yang menarik pada beberapa link. Sebagian besar waktu, ketika Sobat membawa lebih dari link, sesuatu perubahan dalam gaya: itu baik akan berubah warna atau latar belakang atau akan menjadi digaris bawahi. Bagaimana dengan efek keren yang terdiri dalam transisi bertahap dari satu gaya ke yang lain, seperti yang Sobat lihat di bawah ini, Demo:
Sentuh Ini !
Transisi ini dicapai dengan menggunakan transisi properti CSS3 - properti yang didukung di semua browser besar seperti Chrome, Firefox, Opera, Safari (untuk Safari kita akan membutuhkan-webkit-prefix untuk mendapatkan efek ini).
CSS3 Transition Syntax
Transition Syntax mendukung empat nilai :
- Properti dipengaruhi oleh transisi, seperti warna, perbatasan, latar belakang, lebar, dll
- Durasi transisi ini dalam hitungan detik, yaitu, berapa lama waktu yang dibutuhkan untuk mengubah gaya Sobat sepenuhnya
- Waktu tunda untuk transisi akan dieksekusi, juga dalam hitungan detik, yaitu, berapa lama waktu yang dibutuhkan untuk transisi untuk memulai ketika kursor melayang atau menyentuh di atas elemen itu;
Lihat kode di bawah ini :
.example {
transition-property: width; /* properti yang mengalami transisi */
transition-duration: 2s; /* durasi transisi */
transition-timing-function: linear; /* fungsi-waktu */
transition-delay: 0; /* Lamanya waktu untuk menunda dimulainya transisi */
/* sekarang kita akan mengulangi seluruh deklarasi dengan -webkit-prefix untuk efek untuk bekerja di Chrome dan Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 0;
}
Dalam contoh di atas, unsur-unsur dengan contoh kelas. Akan menjadi lebar dalam waktu dua detik apabila kursor melewati element tadi.
Ketika kita mendefinisikan gaya link, biasanya kita perlu menggunakan ini a:link pemilih, dan ketika mendefinisikan gaya ketika kursor di atas link, kita perlu menggunakan :hover pemilih. Namun, transisi dapat digunakan dalam setiap elemen HTML, bukan hanya link.Untuk membuat efek transisi untuk bekerja dengan baik, kita harus mendefinisikan dua blok dari gaya untuk elemen, yaitu gaya normal untuk tag / id / kelas dan gaya pada kursor :hover untuk tag / id / kelas khusus.
Sebagai contoh:
tag, #id, .class {
/* masukkan di sini gaya yang Anda inginkan untuk pemilih */
/* masukkan di bawah efek transisi */
}
tag:hover, #id:hover, class:hover {
/* Sisipkan di sini gaya ketika kursor menyentuh elemen */
/* di sini tidak perlu mengulangi deklarasi transisi */
}
Sobat dapat menambahkan gaya yang sama pada beberapa penyeleksi dipisahkan dengan koma seperti yang saya lakukan di atas, walaupun itu tidak perlu.
Berikut adalah beberapa contoh transisi dengan kode masing-masing.
Saya tidak akan menggunakan transisi,waktu,fungsi dalam contoh ini karena tidak ada bedanya, karena nilai pertama adalah durasi dalam hitungan detik dan yang kedua adalah penundaan.
Contoh 1
Contoh Transisi :
/* dengan properti tunggal */
#example1 {
background-color: #FFFF00;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#example1:hover {
background-color: #B5E2FF;
}
Contoh 2
Contoh Transisi
/* dengan empat sifat dan delay */
#example2 {
background-color: #9c3;
border: 8px solid #690;
padding: 20px;
color: #fff;
-moz-transition-property: background-color,border;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,border;
-o-transition-duration: 1s;
}
#example2:hover {
background-color: #690;
border: 8px dashed #fff;
color: #FFFF00;
-moz-transition-property: background-color,border;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,border;
-o-transition-duration: 2s;
}
Contoh 3 :
Contoh Transisi
/* dengan tujuh sifat dan delay */
#example3 {
padding: 15px;
background-color: #FF7CA6;
font-size: 16px;
width: 30%;
font-weight: bold;
color: #fff;
height: 20px;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 1s;
}
#example3:hover {
background-color:#9c3;
width: 60%;
height: 60px;
padding: 50px;
font-size: 30px;
color: #FFFF00;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 2s;
}
Contoh 4
Contoh Transisi
/* dengan semua properti secara bersamaan */
#example4 {
padding: 15px;
background-color: #9c3;
color: #fff;
font-size: 16px;
width: 30%;
font-weight: bold;
transition: all 2s;
-webkit-transition: all 2s;
}
#example4:hover {
background-color: #FF7CA6;
color: #242424;
width: 60%;
}
Catatan Akhir :
- Deklarasi transisi perlu muncul dalam CSS . Di Blogger , CSS terletak sebelum ]]</b:skin> atau </style>
- Seperti yang Sobat lihat pada contoh di atas , Sobat dapat menetapkan aturan yang berbeda untuk transisi dari elemen yang berbeda dalam satu aturan tunggal - hanya pisahkan dengan koma .
- Tidak wajib untuk menggunakan empat sifat dalam deklarasi transisi , tetapi pesanan mereka harus selalu terlihat seperti ini : properti / durasi / waktu -fungsi / delay .
- Nilai durasi dan delay harus dinyatakan dalam hitungan detik. Dalam hal ini Sobat dapat menggunakan nilai-nilai dengan milidetik , misalnya , .5s berarti setengah detik .
- Dalam interval waktu kecil , waktu properti transisi - fungsi tersebut tidak memberikan efek yang luar biasa yang paling berguna hanya lebih animasi canggih . Nilai yang mungkin adalah salah satu kemudahan ( default , yang membuat transisi dengan awal yang lambat , maka akan lebih cepat dan berakhir perlahan-lahan ) , linear ( kecepatan transisi yang sama dari awal sampai akhir ) , ease-in ( transisi dimulai perlahan dan kemudian kecepatan meningkat ) , ease-out ( transisi mulai cepat dan melambat di akhir ) dan ease-in-out .
