http://www.creativespaces.net.au
http://www.tearoundapp.com
http://www.pigeonandpigeonette.com
Salah satu fitur pada versi CSS3 adalah animasi.Melalui fitur ini kita bisa merubah sebuah tampilan style awal ke sebuah tampilan style yang lain. Pada tulisan kali ini saya ingin mengajak anda berkenalan dengan animasi menggunakan CSS ini. Sebelum membaca lebih lanjut, saya harapkan anda memiliki kemampuan dasar CSS agar tidak kebingungan saat membaca penjelasan dan mencoba contoh-contoh yang ada pada artikel ini.
Animasi CSS
Dengan menggunakan animasi pada CSS kita bisa membuat berbagai animasi dasar yang bisa menggantikan dokumen lain seperti gambar, flash ataupun Javascript. Untuk dapat menggunakan animasi pada CSS, mau tidak mau kita harus berkenalan dengan aturan @keyframe. Karena melalui @keyframe lah animasi CSS dibuat.
Ada beberapa keuntungan saat kita memutuskan untuk membuat animasi melalui CSS
Mudah digunakan untuk kebutuhan animasi dasar, dan anda tidak perlu mengetahui tentang javascript
Animasi dapat berjalan dengan baik walaupun pada sistem yang memiliki spesifikasi rendah. Animasi CSS ini juga cukup cepat di load.
CSS3 @keyframes
Melalui @keyframe lah sebuah animasi dibuat. Kita perlu mendefinisikan sebuah nama untuk animasi yang akan kita buat yang selanjutnya nama itu akan dipanggil untuk menjalankan animasi yang kita buat. Didalam @keyframe kita perlu juga menuliskan kondisi awal animasi hingga kondisi akhirnya. Setidaknya ada dua cara dalam menuliskan kondisi awal dan kondisi akhir
Menggunakan from dan to, misalnya:
1 @keyframes coba
2 {
3 from {background: blue;}
4 to {background: yellow;}
5 }
Menggunakan porsentase, misalnya:
1 @keyframes coba
2 {
3 0% {background: blue;}
4 25% {background: green;}
5 50% {background: red;}
6 100% {background: yellow;}
7 }
Saat ini hampir semua browser populer telah mendukung animasi pada CSS, kecuali IE. Akan tetapi ada beberapa model penulisan @keyframe agar bisa berjalan pada Firefox, Chrome, Safari dan Opera. Berikut ini cara penulisannya
Firefox harus diawali dengan -moz sehingga menjadi @-moz-keyframes
Safari dan Chromes harus diawali -webkit sehingga menjadi @-webkit-keyframes
Opera harus diawali dengan -o- sehingga menjadi @-o-keyframes
Sehingga contoh di atas apabila ditulis sesuai dengan kebutuhan tiap browser menjadi seperti di bawah ini.
01 @keyframes coba
02 {
03 0% {background: red;}
04 25% {background: yellow;}
05 50% {background: blue;}
06 100% {background: green;}
07 }
08
09 @-moz-keyframes coba/* Firefox */
10 {
11 0% {background: red;}
12 25% {background: yellow;}
13 50% {background: blue;}
14 100% {background: green;}
15 }
16
17 @-webkit-keyframes coba/* Safari and Chrome */
18 {
19 0% {background: red;}
20 25% {background: yellow;}
21 50% {background: blue;}
22 100% {background: green;}
23 }
24
25 @-o-keyframes coba/* Opera */
26 {
27 0% {background: red;}
28 25% {background: yellow;}
29 50% {background: blue;}
30 100% {background: green;}
31 }
Menjalankan Animasi CSS
Animasi CSS harus kita panggil dengan cara menempelkannya pada selector. Tanpa cara ini, maka animasi yang kita buat tidak akan dijalankan. Contoh Penulisannya seperti di bawah ini:
1 div
2 {
3 animation: coba 5s;
4 -moz-animation: coba 5s; /* Firefox */
5 -webkit-animation: coba 5s; /* Safari and Chrome */
6 -o-animation: coba 5s; /* Opera */
7 }
Kode diatas akan memanggil animasi css “coba” dengan durasi selama 5 detik. Silahkan gabungkan semua kode di atas dalam satu file HTML dengan menambahkan tag div didalamnya. Contoh selengkapnya seperti kode di bawah ini:
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <style type="text/css">
05 div
06 {
07 width:150px;
08 height:150px;
09 background:red;
10 animation:coba 5s;
11 -moz-animation:coba 5s; /* Firefox */
12 -webkit-animation:coba5s; /* Safari and Chrome */
13 -o-animation:coba 5s; /* Opera */
14 }
15
16 @keyframes coba
17 {
18 from {background:red;}
19 to {background:yellow;}
20 }
21
22 @-moz-keyframes coba/* Firefox */
23 {
24 from {background:red;}
25 to {background:yellow;}
26 }
27
28 @-webkit-keyframes coba/* Safari and Chrome */
29 {
30 from {background:red;}
31 to {background:yellow;}
32 }
33
34 @-o-keyframes coba/* Opera */
35 {
36 from {background:red;}
37 to {background:yellow;}
38 }
39 </style>
40 </head>
41 <body>
42
43 <p>Silahkan refresh sekali lagi tampilan browser anda untuk melihat animasi perubahan warnanya.</p>
44
45 <div></div>
46
47 </body>
48 </html>
ref :
http://www.desainterbaru.com/2011/02/15-contoh-website-css-yang-kreatif-dan.html
http://kangtanto.com/web-2/belajar-dasar-animasi-css3
http://kangtanto.com/web-2/html5-web-2/create-html-5-and-css3-form
Tidak ada komentar:
Posting Komentar