Animasi Dengan CSS3 Tujuan -‐ -‐ -‐
Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi
Dasar Teori Pada praktikum-praktikum sebelumnya, kita telah menggunakan beberapa fitur baru di CSS3 untuk membuat rounded corner, gradient, dan juga drop shadow yang semula hanya bisa dilakukan dengan menggunakan gambar. Pada bagian ini, kita akan mempelajari tentang animasi dan efek-efek kreatif yang semula hanya bisa dilakukan dengan Flash atau Javascript. Pada bagian awal akan dibahas tentang transisi menggunakan CSS, misalnya untuk membuat animasi yang secara perlahan memudar. Selanjutnya akan dibahas tentang transisi untuk merubah posisi obyek, merubah ukuran, memutar atau menggeser obyek.
Transisi CSS Pada saat kita ingin memberikan efek pada sebuah link, semula dengan menggunakan CSS, kita hanya bisa melakukannya dengan cara merubah warna link pada saat mouse berada di atasnya, misalnya berubah menjadi kuning, saat mouse bergeser, maka warna akan kembali seperti semula. Dengan efek transisi dari CSS 3, kita bisa membuat perubahan beberapa warna sekaligus saat mouse berada di atas link. Misalnya saat mouse berada di atas link, secara perlahan warnanya akan berganti-ganti, mulai dari biru, kuning, orange, dan warna lain yang bergantian secara perlahan. Itulah salah satu gambaran aplikasi transisi pada CSS 3. Transisi melalui CSS sebenarnya dikembangkan oleh tem Webkit untuk browser Opera dan saat ini tim tersebut ikut bergabung dalam menyelesaikan Working Draft untuk W3C. Saat ini baru browser versi terbaru yang mendukung transisi ini. Browser yang tidak mendukung sama sekali adalah Internet Explorer 9 dan versi-versi sebelumnya, Firefox 3.6 dan versi dibawahnya, dan Opera 10.1 dan versi-versi sebelumnya. Untuk menerapkan transisi CSS, ada beberapa hal yang perlu diperhatikan, yang kaitanya dengan property CSS yang digunakan, yaitu: -‐ -‐ -‐ -‐
Property CSS yang mana yang akan dirubah (transition-property) Berapa lama durasinya (transition-duration) Perilaku transisi seperti apa (transition-timing-function) Apakah perlu berhenti sebentar sebelum transisi dimulai (transition-delay)
Selain itu, dibutuhkan semacam trigger untuk memicu transisi, misalnya :hover, :focus atau :active merupakan beberapa pilihan yang biasa digunakan untuk memicu terjadinya transisi.
Contoh penulisannya seperti berikut ini:
a.smooth{ transition-property: background-color; transition-duration: 0.3
s;
transition-timing-function: ease-in-out; }
Mengaplikasikan Multiple Transisi Transisi tidak hanya bisa dilakukan pada satu property seperti pada contoh sebelumnya. Akan tetapi transisi juga bisa dilakukan pada beberapa property. Caranya adalah dengan memisahkannya dengan tanda koma, misalnya seperti contoh di bawah ini: a.smooth { … transition-property: background-color, color, letter-spacing; transition-duration: 0.3s, 2s, 0.3s; transition-timing-function: ease-out, ease-in, ease-out; } Durasi untuk tiap property sesuai dengan urutan pada transition-duration, misalnya untuk warna teks, maka durasinya 2s atau dua detik dan menggunakan ease-in pada transition-timing-function.
Transformasi CSS Transformasi pada CSS3 memungkinkan anda untuk memutar, memindah, merubah ukuran atau memiringkan elemen HTML baik dalam ruang 2 dimensi atau 3 dimensi. Pada praktikum ini hanya fokus pada ruang 2 dimensi. Transformasi didukung hampir semua browser terbaru kecuali pada versi-versi lama seperti IE8 kebawah, Firefox 3 ke bawah, dan Opera 10.1 kebawah. Gambar berikut menunjukan 4 tipe transisi untuk 2 dimensi.
Saat sebuah elemen mengalami transformasi, sebenarnya box elementnya tetap berada di posisi semula. Sehingga, saat anda memutar sebuah element, maka sebenarnya yang digerakkan adalah gambarnya saja. Gambar tersebut tidak akan berpengaruh terhadap layout di sekitarnya. Rotate Untuk memutar elemen, anda bisa menuliskan transform: rotate(sudutnya). Contohnya seperti di bawah ini: img { width: 300px; height: 400px; transform: rotate(-10deg); } Pada contoh di atas, obyek akan berputar pada titik tengahnya dengan sudut 10 derajat. Anda juga bisa merubah titik pusat perputarannya. Translate Translate merupakan cara transformasi dengan memindah lokasi dari elemen tersebut. Perpindahan ini mengacu pada sumbu x dan sumbu y. Contoh property yang bisa digunakan untuk translasi adalah: transform:
translateX(50px);
transform:
translateY(25px);
transform: translate(50px, 25px); Contoh aplikasinya seperti pada gambar di bawah ini:
Scale Scale merupakan salah satu transformasi dengan merubah ukuran elemen, baik memperbesar atau memperkecil ukurannya. Perubahan ukuran ini mengacu pada sumbu X dan sumbu Y. Berikut ini contoh penulisan untuk merubah ukuran 150%.
a img { transform: scaleX(1.5); } Penulisan untuk sumbu x dan y sekaligus, bisa dituliskan seperti contoh di bawah ini: a img { transform: scale(2, .5); } Pada contoh diatas, ukuran akan berubah lebarnya 2 kali lipat dan dan setengah dari tinggi seharusnya. Contoh penerapannya seperti di bawah ini:
Skew Skew merupakan transformasi untuk memiringkan obyek dengan patokan sumbu x dan sumbu y yakni dengan merubah sudut baik horizontal atau vertikal. Berikut ini beberapa contoh penulisan skew a img { transform: skewX(15deg); } a img { transform: skewY(30deg); } a img { transform: skew(15deg, 30deg); } Hasil dari kode diatas dapat dilihat pada gambar berikut
Menggunakan Keyframe Untuk membuat animasi yang biasa dilakukan dengan Flash, dan Javascript, kita bisa menggunakan aturan keyframe yang ada pada CSS3. Aturan keyframe yang dituliskan @keyframe merupakan awal dimana animasi CSS dimulai. Anda tinggal menentukan style didalam @keyframe dan animasi akan berjalan mulai perubahan style awal hingga akhir. Saat penulisan modul ini, Internet Explorer belum mendukung @keyframe. Untuk Firefox membutuhkan prefix –moz-, chrome dan safari membutuhkan prefix –webkit- dan opera membutuhkan prefix –o-. Langkah pertama yang perlu dilakukan adalah mendefinisikan animasi yang akan dibuat, contohnya seperti di bawah ini.
Pada contoh di atas, kita mendefenisikan sebuah animasi dengan nama myfirst. Selanjutnya kita perlu menentukan animasi ini akan diterapkan dimana, misalnya pada sebuah selector
. Apabila kita tidak menentukannya, maka animasi tidak akan bisa berjalan.
Saat kita menempelkan animasi kita pada sebuah selector, setidaknya kita perlu menentukan 2 property animasi, yaitu: -‐ -‐
tentukan nama animasi tentukan durasi animasi.
Berdasarkan contoh di atas, kita bisa menuliskannya seperti di bawah ini:
Karena kita telah menggunakan myfirst sebagai nama animasi yang dibuat, maka nama tersebut harus dituliskan apabila kita ingin menggunakannya. Selain itu juga perlu dituliskan durasi berapa lama animasi akan berjalan. Apabila durasi tidak dituliskan, maka animasi tidak akan berjalan, karena secara default nilainya adalah 0. Menggunakan Porsentase Untuk Pergantian State Animasi Animasi pada CSS merupakan sebuah efek yang memungkinkan elemen secara perlahan berubah dari satu style ke style yang lain. Anda bisa merubah sebanyak mungkin style yang anda inginkan dan berapa kali anda menginginkannya. Penentuan pergantian bisa dilakukan dengan menggunakan porsentase. Porsentase ini sebenarnya sama dengan from dan to, yakni from berarti 0% dan to berarti 100%. Perbedaanya, kita bisa menuliskan nilai diantara 0% 100%, misalnya saat mencapai 50%, kita bisa melakukan perubahan efek yang lain. Berikut ini contoh penggunaannya
Pada contoh diatas, perubahan dilakukan saat berada pada 0%, 25%, 50% dan 100%. Untuk memastikan dukungan browser, anda harus menuliskan posisi 0% dan 100%. Berikut ini property lengkap dari animasi CSS 3 Property
Deskripsi
@keyframes
Menentukan animasi
animation
Merupakan penulisan singkat dari semua property animasi, kecuali animation-play-state-property
animation-name
Nama animasi @keyframes
animation-duration
Menentukan berapa detik atau mili detik animasi akan berjalan
animation-timing-function
Bagaimana animasi akan berjalan menyelesaikan satu cycle. Defaulenya adalah “ease”
animation-delay
Menentukan kapan animasi akan dimulai, defaultnya adalah 0
animation-iteration-count
Menentukan jumlah berapa kali animasi akan berjalan saat selesai satu cycle
animation-direction
Menentukan apakah animasi akan dimainkan secara normal atau sebaliknya. Nilai defaultnya adalah normal
animation-play-state
Menentukan apakah animasi dimainkan atau dihentikan sementara (pause). Nilai defaultnya adalh “running”
Langkah Kerja Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini 1. Buatlah folder baru bernama “Praktikum13” dan pastikan anda menyimpan semua file percobaan di praktikum ini pada folder tersebut 2. Buat folder css dan images dan masukkan bahan gambar yang telah disediakan 3. Simpan semua file gambar yang diperlukan pada file images 4. Buka teks editor pilihan anda 5. Ketikkan semua kode yang ada pada tiap percobaan 6. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi .html 7. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save as Type” menjadi “All Files”. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML 8. Pada tiap percobaan, secara perlahan geser tepian browser untuk merubah ukuran lebar layar browser anda dan perhatikan perubahan tampilan. Analisa hasilnya
Hasil Percobaan Percobaan 1: Transisi Dasar
Analisa: Percobaan pertama, mencoba menggunakan dasar transisi yaitu menggunakan transisi decoration dan transisi properti. Fungsi transisi dapat digunakan untuk membuat suatu perpindahan dalam bentuk animasi. Dan hover digunakan untuk trigger perpindahan
Percobaan 2: Transisi Spesifik untuk browser tertentu Percobaan 2a Analisa: Percobaan kedua, mencoba menggunakan dasar transisi yaitu menggunakan transisi decoration dan transisi properti. Fungsi transisi dapat digunakan untuk membuat suatu perpindahan dalam bentuk animasi. Dan hover digunakan untuk trigger perpindahan. Namun perpindahan ukuran dan lama transisi lebih diperhatikan.
Analisa 2b: Percobaan kedua b, hanya terfokus pada penggunaan style hover.
Percobaan 3: Merubah Lebih dari satu property Analisa: Pada percobaan 3 membuat peangaturan transisi proberti lebih banyak dan menggunakan timing function untuk mengatur. Dan hasilnya transisi objek dapat diatur durasinya dan perpindahan keluar dan kedalamnya.
Percobaan 4: Translasi untuk semua browser Letakkan mouse pada obyek yang ada pada browser saat kode berikut ini dijalankan. Jalankan pada browser Firefox, Opera, Chrome dan Internet Explorer. Analisa hasilnya dan bandingkan hasilnya dengan percobaan sebelumnya.
Analisa: Percobaan empat, hamper sama dengan percobaan tiga. Namun pada percobaan ini kita mencoba membukanya pada berbagai browser. Dan ternyata dapat ditampilkan dengan hasil yang sama.
Percobaan 4: Rotate Coba jalankan pada Opera, Firefox, Chrome, dan IE. Analisa hasilnya Analisa: Percobaan kali ini mencoba merotate onjek tulisan dengan menggunakan transform rotate.
Percobaan 5: Multiple Rotate
Analisa: Membuat transform rotate 2 bojek. Yang satu objek background warna. Yang satunya berupa gambar. Namun tetap berada dalam satu div, namun beda class.
Percobaan 6: Merubah Titik sumbu putaran Jalankan kode berikut pada browser anda, selanjutnya pada transform-‐origin, rubah nilainya secara bergantian dengan nilai-‐nilai berikut: -‐ -‐ -‐
left bottom 50% 0% 150px 50px
Setiap merubah nilainya, jalankan pada browser dan perhatikan perbedaannya. Analisa hasilnya
Analisa: Penggunaan transform origin akan mempengaruhi posisi rotate gambar.
Percobaan 7: Translasi Arahkan mouse anda pada gambar dan lihat perubahannya Analisa: Translasi akan mempengaruhi perpindahan atau pergerakan gambar ketika mouse atau pointer diarahkan pada gambar. Transform-translate
Percobaan 8 : Scale Jalankan hasil dari kode program dibawah ini, kemudian letakkan kursor di atas gambar. Lihat hasilnya. Selanjutnya, pada -‐moz-‐transition:-‐moz-‐transform 2s; pindahkan kode tersebut dari .produk ke .produk:hover. Sehingga kode tersebut hilang pada bagian .produk. Jalankan pada browser, dan analisa hasilnya
Analisa:
-‐moz-‐transition:-‐moz-‐transform 2s, digunakan untuk mengatur transform objek. Dan ketika dipindahkan pada .produk hover maka objek akan terlihat sensitive berubah ketika terkena pointer.
Percobaan 9: Skew
Analisa: Skew berfungsi untuk mentransform objek seperti terbang. Tergantung ukuran derajat yang kita inginkan.
Percobaan 10: Menerapkan Multiple Transfer
Analisa: Multi transform akan merubah objek berputas, sesuai ukuran yang kita inginkan
Tugas Buatlah halaman galeri foto dengan menggunakan HTML dan CSS. Saat foto di klik, maka foto akan berputar perlahan dan di zoom. Foto tidak harus disusun sejajar, foto bisa disusun secara berserakan. Sebagai contoh seperti gambar di bawah ini:
Analisa: Tugas kali ini yang perlu diperhatikan yaitu bagaimana cara memunculkan objek tang tertumpuk dibelakang dapat muncul kedepan jika terkena mouse. Dalam hhal ini yang perlu doperhatikan yaitu diberi z-index dengan ukuran yang berbedabeda agar gambar yang tertumpuk dapat keluar.
http://hamidahnh.mb.student.pens.ac.id/Praktikum%208/
