Cara membuat animasi keyframe berayun di blog

Dengan menggunakan CSS3 animasi keyframe, kita bisa mengontrol sytle waktu yang tepat dari element kapan saja. Di sini kita menggunakan keyframes untuk menciptakan efek berayun. Dengan memodifikasi rotasi elemen secara bertahap seiring berjalannya waktu sampai posisi istirahat, atau 0 derajat.

DEMO ( Gambar akan berayun setiap 5 detik sekali)

View Demo

LANGKAH-LANGKAHNYA SEBAGAI BERIKUT : 

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS berikut tepat diatas kode ]]></b:skin> 

.swing{ -webkit-animation:swinging 10s ease-in-out 0s infinite; -moz-animation:swinging 10s ease-in-out 0s infinite; animation:swinging 10s ease-in-out 0s infinite; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; transform-origin:50% 0; } @-webkit-keyframes swinging{ 0% { -webkit-transform: rotate(0); } 5% { -webkit-transform: rotate(10deg); } 10% { -webkit-transform: rotate(-9deg); } 15% { -webkit-transform: rotate(8deg); } 20% { -webkit-transform: rotate(-7deg); } 25% { -webkit-transform: rotate(6deg); } 30% { -webkit-transform: rotate(-5deg); } 35% { -webkit-transform: rotate(4deg); } 40% { -webkit-transform: rotate(-3deg); } 45% { -webkit-transform: rotate(2deg); } 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */ 100% { -webkit-transform: rotate(0); } } @-moz-keyframes swinging{ 0% { -moz-transform: rotate(0); } 5% { -moz-transform: rotate(10deg); } 10% { -moz-transform: rotate(-9deg); } 15% { -moz-transform: rotate(8deg); } 20% { -moz-transform: rotate(-7deg); } 25% { -moz-transform: rotate(6deg); } 30% { -moz-transform: rotate(-5deg); } 35% { -moz-transform: rotate(4deg); } 40% { -moz-transform: rotate(-3deg); } 45% { -moz-transform: rotate(2deg); } 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */ 100% { -moz-transform: rotate(0); } } @keyframes swinging{ 0% { transform: rotate(0); } 5% { transform: rotate(10deg); } 10% { transform: rotate(-9deg); } 15% { transform: rotate(8deg); } 20% { transform: rotate(-7deg); } 25% { transform: rotate(6deg); } 30% { transform: rotate(-5deg); } 35% { transform: rotate(4deg); } 40% { transform: rotate(-3deg); } 45% { transform: rotate(2deg); } 50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */ 100% { transform: rotate(0); } }


KODE HTML

• Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
• Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.

<img class="swing" src="http://i1087.photobucket.com/albums/j479/jalupangna/PrabuSiliwangi-1.jpg" />


<img class="swing" src="http://i1087.photobucket.com/albums/j479/jalupangna/PrabuSiliwangi-1.jpg" style="
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
    "
/>


<img class="swing" src="http://i1087.photobucket.com/albums/j479/jalupangna/PrabuSiliwangi-1.jpg" style="
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
    "
/>  

KETERANGAN: 

Silahkan ganti link gambar pada warna kuning diatas dengan link gambar anda.

Happy Blogging...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 21.33