Jumat, 01 Maret 2013

0 Cara Membuat Efek Keyframe Gerak Dengan CSS

Date : Jumat, 01 Maret 2013 01.22
Category :
Author : Gazelle RackaLs
Share :
Responds : 0 Comment
Cukup kesal aku kali ini, karena ide membuat keyframe saya dijiplak seseorang. Dari pada dia posting dan mengaku trik buatan dia mending saya aja yang posting. Sebelum itu mungkin kalian belum tau yang namanya Keyframe adalah sebuah fram tempat anda menetapkan perubahan di dalam animasi. Dari pada banyak basa-basi mending kita langsung praktek aja yah....

Cara-caranya ikuti dibawah ini:
1.Masuk ke:

  • Untuk Dashboard Baru Masuk : Blogger » Layout »  Add Widget/Tambah Widget
  • Untuk Dashboard Lama Masuk : Blogger » Rancangan » Layout » Add Widget/Tambah Widget
2.Jika sudah mengklik Add Widget/Tambah Widget, pilih HTML/JavaScript.
3.Pastekan kode dibawah ini,, pilih salah satu yang kalian suka:

1.Keframe AtasBawah: yaitu animasi yang bergerak keatas dan kebawah


Atas Bawah


<style type="text/css">
#atasbawah
{
background:red;
width:100px;
height:100px;
font-size:20pt;
position:relative;
animation:atasbawah 2s infinite;
-moz-animation:atasbawah 2s infinite; /* Firefox */
-webkit-animation:atasbawah 2s infinite; /*Safari and Chrome*/
}

@keyframes atasbawah
{
0%   {top:0px;}
50%  {top:20px;}
100% {top:0px;}
}

@-moz-keyframes atasbawah /* Firefox */
{
0%   {top:0px;}
50%  {top:20px;}
100% {top:0px;}
}

@-webkit-keyframes atasbawah /* Safari and Chrome */
{
0%   {top:0px;}
50%  {top:20px;}
100% {top:0px;}
}
</style>
<div id='atasbawah'>Atas Bawah</div>

2.Keframe Muter-Muter: yaitu animasi yang bergerak muter-muter

Muter Muter






<style type="text/css">
#mutermuter
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mutermuter 5s infinite;
-moz-animation:mutermuter 5s infinite; /* Firefox */
-webkit-animation:mutermuter 5s infinite; /*Safari and Chrome*/
}

@keyframes mutermuter
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-moz-keyframes mutermuter /* Firefox */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mutermuter /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style><div id="mutermuter">
Muter Muter</div>

3.Keframe KiriKanan: yaitu animasi yang bergerak kekiri dan kekanan

Kiri kanan

<style type="text/css">
#kirikanan
{
width:100px;
height:100px;
font-size:20pt;
background:red;
position:relative;
animation:kirikanan 5s infinite;
-moz-animation:kirikanan 5s infinite; /* Firefox */
-webkit-animation:kirikanan 5s infinite; /*Safari and Chrome*/
}

@keyframes kirikanan
{
0%   {top:0px; left:0px; }
50%  {top:0px; left:100px; }
100% {top:0px; left:0px;}
}

@-moz-keyframes kirikanan /* Firefox */
{
0%   {top:0px; left:0px; }
50%  {top:0px; left:100px; }
100% {top:0px; left:0px;}
}

@-webkit-keyframes kirikanan /* Safari and Chrome */
{
0%   {top:0px; left:0px; }
50%  {top:0px; left:100px; }
100% {top:0px; left:0px;}
}
</style>
<center><div id='kirikanan'>Kiri kanan</div></center>
Nah mungkin itu saja yang cukup saya berikan hari ini,, jangan lupa dipraktekan..atas perhatiannya terima kasih

Artikel Terkait :



Category :

Posting Komentar

Langganan: Posting Komentar ( Atom )

Get this

close
cbox
 
© Copyright Gazelle RackaLs | Template By : RackaLs