Demo pada halaman ini akan bekerja dengan baik di Safari, Chrome dan Opera. Dalam Firefox sebelum versi 4, Anda akan melihat transformasi, tapi tanpa animasi apapun. Efek transformasi juga bekerja sempurna di Inter
net Explorer 9 menggunakan -ms- vendor prefix.
Penggunaan CSS animation melibatkan pengaturan transforms digunakan untuk memberikan efek pada mouseover atau lainnya. Selain menerapkan efek langsung, kita dapat menetapkan fungsi waktu transisi yang menerapkan transformasi selama periode waktu yang ditetapkan.
Firefox dan Opera sekarang sudah mendukung transformasi tersebut dengan sintaks yang hampir sama – cukup mengganti -webkit dengan -mozatau -o pada contoh di bawah ini dan Anda akan melihat efek yang sama. Dan Anda dapat menggunakan -ms untuk mengaktifkan efek transformasi untuk IE9.
1. Memperkenalkan CSS Transformasi
Efek dari CSS Transform adalah untuk memodifikasi tampilan suatu unsur dalam browser oleh translation, rotasi atau cara lain. Bila diterapkan dalam style sheet transformasi akan terbaca sebelum halaman terlihat, sehingga Anda tidak akan langsung melihat setiap animasi yang akan berlangsung. Transformasi juga dapat diterapkan dalam mouseover atau efek yang sama yang dapat Anda lihat pada bagian berikutnya.
Di bawah ini empat DIV identik membentuk kotak ukuran 100 x 60 pixel dengan border 2 pixel. Selanjutnya, setiap elemen telah berubah dalam beberapa cara menggunakan -webkit-transform property sebagai berikut:
| box 1 | Translated ke kanan: -webkit-transform: translate(3em,0); |
| box 2 | Rotated 30 degrees searah jarum jam: -webkit-transform: rotate(30deg); |
| box 3 | Translated ke kiri dan bawah: -webkit-transform: translate(-3em,1em); |
| box 4 | Scaled 2 kali ukuran asli: -webkit-transform: scale(2); |
Tanpa translations dan red border pada box 2, Anda hanya akan melihat empat box sama dengan label satu sampai empat. Untuk semua browser yang mendukung (Safari, Chrome, Firefox, Opera), box akan tampak seperti gambar di bawah ini:
Safari, Chrome, Firefox, Opera dan semua Browser Yang Mendukung akan terlihat seperti ini.
Catatan: Teks masih bisa di sorot dalam transformed elements.
2. Animasi Transforms
Sementara Transformasi CSS merupakan tool yang cantik untuk pengembang (meskipun membuat merinding untuk berpikir apa yang akan terjadi jika terdapat lebih banyak yang tool tersedia), kemampuan untuk menghidupkan efek yang sama dengan menggunakan -webkit-transition jauh lebih menarik. Coba arahkan mouse Anda ke dalam empat box demo berikut ini:
Apa yang Anda lihat di atas adalah empat kotak dari sesi sebelumnya. Bila Anda mouseover salah satu kotak, terjadi transformasi CSS yang diterapkan sebagai animasi untuk satu detik. Ketika mouse bergerak menjauh animasi akan dibalik, setiap kotak kembali ke posisi awal dan bentuk mereka semula. Dan ini tanpa menggunakan JavaScript – hanya HTML dan CSS!
Cukup keren, membuktikan bahwa Animasi CSS dapat diterapkan tidak hanya untuk mengubah, tetapi juga untuk sifat-sifat CSS lainnya termasuk: opacity, warna dan sejumlah properti lainnya.
Pada contoh berikut kotak di sebelah kiri dimulai sebagai kecil dan hijau dengan sudut persegi, sedangkan yang di sebelah kanan lebih besar, dengan perbatasan merah dan sudut bulat. Melayang di atas salah satu kotak akan memicu animasi yang membuat kotak 1 mengambil bentuk kotak 2 dan sebaliknya.
Sekali lagi, kita masih hanya menggunakan HTML dan CSS untuk membuat hal ini terjadi. Tanpa CSS transformasi dua kotak hanya akan mengubah border-color mereka, dan mungkin juga border-radius.
3. Multiple timing functions
Dalam demo ini kita menerapkan empat transisi yang berbeda menggunakan empat timing functions yang berbeda.
Ketika Anda :hoverarea di sebelah kanan, kotak warna biru akan berputar, berubah warna dari merah ke biru dan bergerak dari kiri atas area kotak ke kanan bawah lebih dari dua detik.
Hal pertama yang akan Anda perhatikan adalah bahwa pergerakan kotak tampaknya menyamping. Itu karena kita telah menggunakan ease-outtiming function untuk horizontal translation dan ease-in for the vertical.
Fitur lainnya adalah bahwa perubahan warna dari biru menjadi merah berlangsung selama detik pertama dari dua bagian transisi, diikuti oleh rotasi yang berlangsung pada detik kedua.
Trik untuk ini adalah bahwa kita tidak hanya bisa mendefinisikan -webkit-transition sebagai properti tunggal, melainkan dapat memecahnya menjadi bagian-bagian komponen. Kami juga bisa penggunaan -webkit-transition-delay yang memungkinkan Anda untuk mengatur titik awal dari efek yang berbeda.
Berikut adalah pernyataan CSS yang relevan:
5 | -webkit-transition-property: left, top, background, -webkit-transform; |
6 | -webkit-transition-duration: 2s, 2s, 1s, 1s; |
7 | -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; |
8 | -webkit-transition-delay: 0, 0, 0, 1s; ... |
14 | -webkit-transform: rotate(360deg); |
Aturan yang mempengaruhi transisi warna latar belakang telah disorot.
4. Hover satu element untuk memberikan efek yang lain
Kita menghubungkan dua buah event dalam sebuah halaman kemudian memberikan efek animasi pada event ke satu saat hover atau klik event kedua dan sebaliknya. Dengan JavaScript ini dapat dilakukan dengan menggunakan event handler untuk mengatur atau mengubah className elemen menjadi animasi, dan memiliki transformasi atau keyframesterkait dengan class baru.
Menggunakan CSS ada beberapa pilihan untuk menargetkan elemen terkait. Ini melibatkan selectors sebagai combinators >(child), + (adjacent sibling) dan ~ (general sibling).
Pada demo dibawah ini animasi kotak biru hanya terjadi ketika Anda hover kotak warna merah:
Kode CSS yang relevan adalah sebagai berikut. Perhatikan bahwa kita menggunakan + combinator untuk menargetkan #box2 ketika #box1mengalami hover event. Combinator ~ mungkin lebih fleksibel dalam membiarkan Anda menargetkan elemen yang jauh dari unsur pemicu.
9 | -webkit-transform: rotate(360deg); |
10 | -moz-transform: rotate(360deg); |
11 | -o-transform: rotate(360deg); |
12 | -ms-transform: rotate(360deg); |
13 | transform: rotate(360deg); |
Tentu kita masih dapat memberikan animasi pada kotak pertama pada waktu yang sama:
Pastikan untuk tidak memindahkan elemen hover keluar dari bawah pointer atau animasi akan berhenti / mundur.
Title : MENGENAL CSS ANIMATION DAN CSS TRANSFORMS
Description : Demo pada halaman ini akan bekerja dengan baik di Safari, Chrome dan Opera. Dalam Firefox sebelum versi 4, Anda akan melihat transformasi, t...
