Belajar CSS Animasi @Keyframes

Saturday, June 2, 2012

Animasi pada sebuah web sangatlah perlu untuk menarik perhatian para pangunjung. Seperti halnya animasi yang sering digunakan dengan penerapan kode jQuery yang bisa dibilang sangatlah ribet untuk pemula. Berikut Admin memberikan coding melalun penerapan CSS @keyframes pada. Seperti halnya yang ada di blog ini.

@keyframes menjadi yang terbaik untuk menggantikan kerja jQuery, CSS animasi @keyframes bisa kita gunakan untuk memuat halamanan loading dan masih banyak lagi kerja animatsi ini, namun sebelum itu kita harus mengenal dulu seperti apa kerja @keyframes tersebut. Perhatikan perbedaan contoh ke-1 dan ke contoh ke-2

1

Contoh ke-1 menggunakan from dan to :

p#box{
  width:50px;
  height:50px;
  border:1px solid #fff;
  box-shadow:0 0 2px #000;
  position:relative;
  animation:keyname 5s infinite;
  -moz-animation:keyname 5s infinite;
  -webkit-animation:keyname 5s infinite;
 }
@keyframes keyname
 {
  from {left:0px;}
  to {left:230px; background:green; width:80px;}
 }

@-moz-keyframes keyname{
  from {left:0px;}
  to {left:230px; background:green; width:80px;}
 }

@-webkit-keyframes keyname
 {
  from {left:0px;}
  to {left:230px; background:green; width:80px;}
 }

<p id="box"></p>

Sample 1

2

Contoh ke-2 Penggunaan @keyframes menggunakan [%] :

p#box2{
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:#92B901;}
50% {left:50px; background:#1EC7E6;}
75% {left:100px; background:#fff;}
100% {left:0px; background:#000;}
}

@-moz-keyframes keyname
{
0% {left:0px;}
25% {left:200px; background:#92B901;}
50% {left:50px; background:#1EC7E6;}
75% {left:100px; background:#fff;}
100% {left:0px; background:#000;}
}

@-webkit-keyframes keyname{
0% {left:0px;}
25% {left:200px; background:#92B901;}
50% {left:50px; background:#1EC7E6;}
75% {left:100px; background:#fff;}
100% {left:0px; background:#000;}
}

<p id="box2"></p>

Sample 2

note : Perlu di ingatkan lagi bahwa tidak semua browser mendukung animasi ini

Coba sendiriLebih lanjut

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini