0
CSS3
Posted by Unknown
on
07.13
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:
@keyframes coba
{
from {background: blue;}
to {background: yellow;}
}
- Menggunakan porsentase, misalnya:
@keyframes coba
{
0% {background: blue;}
25% {background: green;}
50% {background: red;}
100% {background: yellow;}
}
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.
@keyframes coba
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes coba/* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes coba/* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes coba/* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
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:
div
{
animation: coba 5s;
-moz-animation: coba 5s; /* Firefox */
-webkit-animation: coba 5s; /* Safari and Chrome */
-o-animation: coba 5s; /* Opera */
}
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:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:150px;
height:150px;
background:red;
animation:coba 5s;
-moz-animation:coba 5s; /* Firefox */
-webkit-animation:coba5s; /* Safari and Chrome */
-o-animation:coba 5s; /* Opera */
}
@keyframes coba
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes coba/* Firefox */
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes coba/* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@-o-keyframes coba/* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p>Silahkan refresh sekali lagi tampilan browser anda untuk melihat animasi perubahan warnanya.</p>
<div></div>
</body>
</html>
Posting Komentar