Membuat CSS Animation @keyframes

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


7 comments:

  1. waaahh kereen gan :)
    ditunggu kunjungan dan komennya disini
    http://better-right.blogspot.com

    ReplyDelete
  2. wah, wah kok tutornya kayak yang di http://plustutorial.blogspot.com/2012/07/belajar-keyframes-dengan-mudah-ver-1.html

    ReplyDelete
    Replies
    1. nah.. itu blog kenapa juga tutornya kaya artikel ini.. zzzZZzzz.. @@,

      Delete
    2. karena sama sama menceritakan tentang @keyframes wkwkwkwkwk. \o/

      Delete
    3. hehehe, btw gimana cara membuat emotion kayak disini, ? (kalau di klik keluar kodenya)? (yg kayak di DTE juga ? )

      Delete
    4. di DTE juga ada ko tutorialnya..

      Delete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top