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 */ /* kini kita akan mengulangi seluruh deklarasi dengan -webkit-prefix untuk imbas untuk bekerja di Chrome dan Safari */ -webkit-transition-property: width; -webkit-transition-duration: 2s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; }Dalam pola di atas, unsur-unsur dengan pola kelas. Akan menjadi lebar dalam waktu dua detik apabila kursor melewati element tadi.
Baca juga : Cara Membuat Artikel
Ketika kita mendefinisikan gaya link, biasanya kita perlu memakai ini a:link pemilih, dan saat mendefinisikan gaya saat kursor di atas link, kita perlu memakai :hover pemilih. Namun, transisi sanggup dipakai dalam setiap elemen HTML, bukan hanya link.
Untuk menciptakan imbas 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 imbas transisi */ } tag:hover, #id:hover, class:hover { /* Sisipkan di sini gaya saat kursor menyentuh elemen */ /* di sini tidak perlu mengulangi deklarasi transisi */ }Sobat sanggup menambahkan gaya yang sama pada beberapa penyeleksi dipisahkan dengan koma ibarat yang saya lakukan di atas, walaupun itu tidak perlu.
Berikut yaitu beberapa pola transisi dengan instruksi masing-masing.
Saya tidak akan memakai transisi,waktu,fungsi dalam pola ini alasannya yaitu tidak ada bedanya, alasannya yaitu nilai pertama yaitu durasi dalam hitungan detik dan yang kedua yaitu 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 pola di atas , Sobat dapat menetapkan hukum yang berbeda untuk transisi dari elemen yang berbeda dalam satu hukum tunggal - hanya pisahkan dengan koma .
- Tidak wajib untuk memakai empat sifat dalam deklarasi transisi , tetapi pesanan mereka harus selalu terlihat ibarat ini : properti / durasi / waktu -fungsi / delay .
- Nilai durasi dan delay harus dinyatakan dalam hitungan detik. Dalam hal ini Sobat sanggup memakai nilai-nilai dengan milidetik , contohnya , .5s berarti setengah detik .
- Dalam interval waktu kecil , waktu properti transisi - fungsi tersebut tidak menawarkan imbas yang luar biasa yang paling mempunyai kegunaan hanya lebih animasi canggih . Nilai yang mungkin yaitu salah satu fasilitas ( default , yang menciptakan transisi dengan awal yang lambat , maka akan lebih cepat dan berakhir perlahan-lahan ) , linear ( kecepatan transisi yang sama dari awal hingga simpulan ) , ease-in ( transisi dimulai perlahan dan kemudian kecepatan meningkat ) , ease-out ( transisi mulai cepat dan melambat di simpulan ) dan ease-in-out .
