Membuat CSS Animation @keyframes

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

1

Contoh ke-1 menggunakan from dan to :

CSS

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;}
 }

HTML

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

Sample 1

2

Contoh ke-2 Penggunaan @keyframes menggunakan [%]

CSS

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;}
}

HTML

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

Sample 2

Catatan :

• unuk KEYNAME anda bisa ganti dengan id dan class


• sedangkan untuk markup HTML di atas saya gunakan </p> dan anda bisa menggantinya dengan Span, Div, li, ul, ol dan lain lain.

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