Kalian pasti rindu akan mainan kan??!
Pada pertemuan kali ini kita akan membahas lebih lanjut tentang penggunaan CSS3, termasuk tentang penerapan Animation CSS3. Anda diharuskan memiliki dasar penggunaan CSS yang baik, dan paham tentang konsep penggunaan HTML dan CSS. Serta diasumsikan telah mengetahui banyak script CSS3.
Untuk pemanasan, silahkan Anda nikmati sample contekan berikut ini, untuk membuat design dengan CSS3 tingkat Advance.
Anda harus mencoba contoh pada link tersebut! Silahkan Play dan Contek! 😛
Animation CSS3 Simple Sample!
Setiap mahasiswa diharapkan mengetahui dasar penggunaan CSS3 Animation, baik untuk penggunaan design layout yang dinamis, maupun untuk meningkatkan penerapan aplikasi interaktif pada aplikasi web. Berikut ini beberapa bagian penting dari penerapan CSS3 tingkat Andvance,
- CSS Transition : http://www.w3schools.com/css/css3_transitions.asp
- CSS Transformation :
- teknik 2D : http://www.w3schools.com/css/css3_2dtransforms.asp
- teknik 3D : http://www.w3schools.com/css/css3_3dtransforms.asp
- CSS Animation : http://www.w3schools.com/css/css3_animations.asp
Pelajari berbagai jenis penerapan CSS3 diatas, dan perhatikan contoh sederhananya. Berikut ini salah satu penerapan Animasi sederhana (perhatikan bagian head dan body),
<head> <style> div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s; }/* Chrome, Safari, Opera */ @-webkit-keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }/* Standard syntax */ @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } </style> </head> <body><p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p><div></div></body>
Contoh diatas adalah dasar penggunaan untuk keyframe pada animasi, sekilas mirip dengan penggunaan timing pada Flash.
Untuk lebih memahami penggunaan dasar dari CSS3 Animation, Anda bisa merujuk dari tutorial singkat yang diberikan pada link berikut ini,
Pada link tutorial tersebut diberikan beberapa contoh penerapah CSS3 Animation, beserta penjelasan singkat dari fitur yang ada. Anda diminta untuk mengikuti 4 Chapter pada Tutorial tersebut, yang terdiri dari :
- CSS TRANSITIONs, http://css3.bradshawenterprises.com/transitions/
- use transitions
- timing function
- delay
- properties of transition
- CSS3 TRANSFORMs, http://css3.bradshawenterprises.com/transforms/
- use transforms
- 3D transforms
- Cube & Image
- CSS3 ANIMATIONs, http://css3.bradshawenterprises.com/animations/
- use animation & Demo (simple)
- Cross Fading Images, salah satu penerapan dari fitur CSS3
- Sliding Content, salah satu penerapan dari fitur CSS3
- Flipping Content, salah satu penerapan dari fitur CSS3
Silahkan masing-masing mahasiswa mengerjakan setiap link tutorial yang ada diatas. Pastikan Anda mencoba semua demo sederhana pada CSS tersebut sampai berhasil. Hasil pekerjaan setiap individu akan dibawa pada pertemuan kelas berikutnya dihari Selasa (sore).
Jika Ada yang membingungkan, silahkan bertanya melalui email atau kirim komentar dibawah ini!
Selamat Bermain.
One response to “Mainan RIA 2015 : Animation CSS3 (Advance)”
[…] http://tambunan.staff.telkomuniversity.ac.id/2015/09/17/mainan-ria-2015-animation-css3-advance/ […]