Css3 Animasi @keyframes

@keyframes, pernah lihat tulisan itu sebelumnya? Menurut saya sediri @keyframes itu didefinisikan sebagai bingkai atau tempat yang memperlihatkan beberapa gerakan atau animasi suatu objek dengan transisi yang mulus/smooth. Satu Gerakan atau Animasi itu bisa juga disebut Frame. Mungkin jika kurang atau bahkan keliru, sobat bisa menambahkannya hihi.

Yang saya bicarakan hari ini disini adalah @keyframes tentang Css3 yang sedang nge-trend saat ini. @keyframes ini musuh bebuyutannya Jquery Animation menurut saya :P haha. Banyak keluhan sebagian masyarakat tentang Jquery Animation "kalau pakai Jquery lambat gak bro?", "wah jquery, lambat gak nih sob?" dan lain lain.

Kembali ke Topic @keyframes ini. @keyframes ini hanya support pada web Browser tertentu. Ada beberapa yang tidak bisa sama sekali web browser menggunakan Css3 @keyframes ini, diantaranya Internet Explorer dan Opera. Entah kenapa Web Browser itu tidak support css3 @keyframes ini. Untuk Mozilla Firefox bisa di bantu dengan bantuan alternatif @-moz- sedangkan Safari dan Google Chrome dibantu dengan menggunakan @-webkit-.

Lihat contoh dan langsung kodenya berikut ini :

1. Animasi menggunakan From dan To
Code Css

div#divid{
width:50px;
height:50px;
background:black;
border:1px solid #fff;
box-shadow:0 0 3px #000;
position:relative;
animation:keyname 5s infinite;
-moz-animation:keyname 5s infinite;
-webkit-animation:keyname 5s infinite;
}

@keyframes keyname
{
from {left:0px;}
to {left:200px; background:red; width:100px;}
}

@-moz-keyframes keyname
{
from {left:0px;}
to {left:200px; background:red; width:100px;}
}

@-webkit-keyframes keyname
{
from {left:0px;}
to {left:200px; background:red; width:100px;}
}

HTML Code

<div id="divid"></div>

Preview


2. Animasi Menggunakan Persen [%]
   

div#divid{
width:50px;
height:50px;
background:black;
border:1px solid #fff;
box-shadow:0 0 3px #000;
position:relative;
animation:keyname 5s infinite;
-moz-animation:keyname 5s infinite;
-webkit-animation:keyname 5s infinite;
}

@keyframes keyname
{
0% {left:0px;}
25% {left:200px; background:#fc0;}
50% {left:50px; background:#de0101;}
75% {left:100px; background:#fff;}
100% {left:0px; background:#000;}
}

@-moz-keyframes keyname
{
0% {left:0px;}
25% {left:200px; background:#fc0;}
50% {left:50px; background:#de0101;}
75% {left:100px; background:#fff;}
100% {left:0px; background:#000;}
}

@-webkit-keyframes keyname{
0% {left:0px;}
25% {left:200px; background:#fc0;}
50% {left:50px; background:#de0101;}
75% {left:100px; background:#fff;}
100% {left:0px; background:#000;}
}


HTML Code

<div id="divid"></div>

Penjelasan

• Warna Unggu adalah ID dari Animasi
• Warna Biru adalah style dari Object yang diatas membentuk Kotak
• Warna Oranye adalah Nama keyframe
• Warna Merah adalah Properti animasi → infinite artinya Animasi berjalan berulang-ulang tak terhingga. Bisa di ganti dengan Angka saja, 10s artinya sepanjang perubahan animasi berjalan 10 Secon atau Detik.
• Warna Hijau adalah kode css sebelum animasi berjalan
• Warna Biru muda adalah css effect animasi
• Kode Persen [%] adalah jalannya cerita Animasi
• Kode Berkedip tidak harus dalam bentuk DIV bisa tag lainnya seperti Span, P, li, ul, ol dan lain lain
  
Preview

Bisa di terapkan di blog kira kira? hehehe @keyframes ini berfungsi banyak lho, seperti animasi munculnya sesuatu atau pop-up gitu :) tapi disini hanya menyediakan trik dasar @keyframes saja :) kurang lebihnya mohon maaf, wassalam :)