Anda di halaman 1dari 9

Membuat CSS Animation @Keyframes

Sunday, June 10, 2012 CSS Tuts+ | Posted By : Denzdii GN | 7 Comments
Home » Animation » CSS » CSS Animation » 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;

 background:green.}   to {left:230px. width:80px.}   to {left:230px.}  } @­moz­keyframes keyname{   from {left:0px. width:80px.  } @keyframes keyname  {   from {left:0px.  ­webkit­animation:keyname 5s infinite.}  } HTML <p id="box"></p> Sample 1 . background:green. background:green.}  } @­webkit­keyframes keyname  {   from {left:0px. width:80px.}   to {left:230px.

height:50px. background:black. border:1px solid #fff. background:#92B901.2 Contoh ke-2 Penggunaan @keyframes menggunakan [%] CSS p#box2{ width:50px.} 25% {left:200px. ­webkit­animation:keyname 5s infinite. } @keyframes keyname { 0% {left:0px. ­moz­animation:keyname 5s infinite.} 50% {left:50px. background:#fff. background:#1EC7E6.} .} 100% {left:0px. box­shadow:0 0 3px #000.} 75% {left:100px. position:relative. background:#000. animation:keyname 5s infinite.

 background:#fff. background:#1EC7E6.} 75% {left:100px. background:#000.} @­moz­keyframes keyname { 0% {left:0px. background:#92B901.} 100% {left:0px.} 50% {left:50px.} 25% {left:200px. background:#92B901. background:#1EC7E6. background:#fff.} 75% {left:100px. background:#000.} } @­webkit­keyframes keyname{ 0% {left:0px.} 100% {left:0px.} } HTML <p id="box2"></p> Sample 2 .} 25% {left:200px.} 50% {left:50px.

 } @keyframes keyname  {   from {left:0px.   position:relative. ul.   box­shadow:0 0 2px #000.} . ol dan lain lain.   ­moz­animation:keyname 5s infinite.   animation:keyname 5s infinite. note : Perlu di ingatkan lagi bahwa tidak semua browser mendukung animasi ini 1 Contoh ke-1 menggunakan from dan to : CSS p#box{   width:50px.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. li.   ­webkit­animation:keyname 5s infinite.   height:50px.   border:1px solid #fff. Div.

height:50px.}   to {left:230px.}   to {left:230px.}  } @­webkit­keyframes keyname  {   from {left:0px. width:80px. background:green.}  } HTML <p id="box"></p> Sample 1 2 Contoh ke-2 Penggunaan @keyframes menggunakan [%] CSS p#box2{ width:50px. background:green.  to {left:230px. background:green. width:80px. .}  } @­moz­keyframes keyname{   from {left:0px. width:80px.

} 100% {left:0px.} } @­moz­keyframes keyname { 0% {left:0px. background:#000.} 25% {left:200px.background:black. } @keyframes keyname { 0% {left:0px. background:#fff.} 50% {left:50px. ­webkit­animation:keyname 5s infinite.} 75% {left:100px.} 25% {left:200px. border:1px solid #fff. background:#1EC7E6.} . ­moz­animation:keyname 5s infinite. position:relative. animation:keyname 5s infinite. background:#92B901. background:#92B901. box­shadow:0 0 3px #000.

 background:#1EC7E6. background:#fff. li.} 75% {left:100px. background:#fff.} } @­webkit­keyframes keyname{ 0% {left:0px.} } 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.} 50% {left:50px. note : Perlu di ingatkan lagi bahwa tidak semua browser mendukung animasi ini . background:#000. background:#92B901. ol dan lain lain.} 25% {left:200px.} 100% {left:0px.} 100% {left:0px. ul. background:#000.} 75% {left:100px. background:#1EC7E6.50% {left:50px.