Cara membuat animasi keyframe berayun di blog

Posted at 21.33 | in tips dan triks 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

Anda menyukai postingan di atas? Silahkan di share..!

Post Author

Jalupangna

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

28 April 2013

Cara membuat animasi keyframe berayun di blog

Jalupangna

0 komentar:

Popular Posts

Blog Archive

Label

Recent Comment

Followers