Belajar Dasar Animasi CSS3

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>


Contoh animasi yang lainnya bisa anda pelajari di tutorial pembuatan notifikasi Facebook.

Incoming search terms:

Be Sociable, Share!

Related Posts:

5 Comments

Add a Comment

Your email address will not be published. Required fields are marked *