Belajar @keyframes Dengan Mudah ( ver. 2 )

Advance, Trick

2 Komentar

  Setelah saya menjelaskan yang pertama kini lanjut ke versi yang kedua

 Kotak ( ver. 2 )

Perhatikan kotak ver 2 di atas, perbedaan dengan yang versi pertama adalah pada kodenya saat tadi kita menggunakan persenan kini kita menggunakan from dan to , code css nya sebagai berikut :

#kotak2{ width:60px; height:120px; background:#000000; border:1px inset #fff; box-shadow:0 0 3px #000; position:relative;-webkit-animation:plustutorial 5s infinite ; -moz-animation:plustutorial 5s infinite alternate;animation:plustutorial 5s infinite ;
 }
@keyframes plustutorial{
from {left:100px; background:#92B901;width:70px;}
to {left:200px; background:#1EC7E6;width:140px;}}
@-moz-keyframes plustutorial{
from {left:100px; background:#92B901;width:70px;}
to {left:200px; background:#1EC7E6;width:140px;}}
@-webkit-keyframes plustutorial{
from {left:100px; background:#92B901;width:70px;}
to {left:200px; background:#1EC7E6;width:140px;}}

dan kode HTML nya :

<div id="kotak2"></div>

untuk penjelasan ada di http://plustutorial.blogspot.com/2012/07/belajar-keyframes-dengan-mudah-ver-1.html ,


Jika anda mengiginkan from ke to lalu kembali ke from lagi tinggal tambahkan kode alternate di depan infinite jadinya seperti ;

#kotak2{ width:60px; height:120px; background:#000000; border:1px inset #fff; box-shadow:0 0 3px #000; position:relative;-webkit-animation:plustutorial 5s infinite alternate ; -moz-animation:plustutorial 5s infinite alternate;animation:plustutorial 5s infinite alternate ; }

dan demonya :

 Kotak ( ver. 2 )

Selamat Mencoba dan bermanfaat !!