Scannerblog: Css3 animasi tossing

css3 bag2 animasi tossing

Animasi menggunakan css3. Sebelumnya dibahas tentang css3 bag1 css3 Pulse, kali ini mengulas tentang css3 tossing. berikut adalah css3 yang akan kita gunakan.

/* Css3 tossing  */

 .tossing{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } 

letakkan kode css3 sebelum tag ]]< /b:skin>
 dan atau bisa juga menggunakan style type.  Untuk object animasi masih menggunakan object img src berikut

 < a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDw16vMd0s6feo3gtQ5F1sLE2d_csqx9w6jeH_vMedwq73gkhRC-U25CEkW6ZYoMEXid8pf8xbmsdTgsxvEgpE4PNG4KWob260Ab1tT7U5k4aDYv_qjRMs6EjRYCTrytAZj-6mMWZqX4/s1600/twitter-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" > < img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDw16vMd0s6feo3gtQ5F1sLE2d_csqx9w6jeH_vMedwq73gkhRC-U25CEkW6ZYoMEXid8pf8xbmsdTgsxvEgpE4PNG4KWob260Ab1tT7U5k4aDYv_qjRMs6EjRYCTrytAZj-6mMWZqX4/s1600/twitter-icon.png" / > < /a> 


 apit img src menggunakan div
< div class='tossing' >
 TARUH OBJECT DISINI
< /div >

 sehingga menjadi

 <div class='tossing'> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDw16vMd0s6feo3gtQ5F1sLE2d_csqx9w6jeH_vMedwq73gkhRC-U25CEkW6ZYoMEXid8pf8xbmsdTgsxvEgpE4PNG4KWob260Ab1tT7U5k4aDYv_qjRMs6EjRYCTrytAZj-6mMWZqX4/s1600/twitter-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" > < img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDw16vMd0s6feo3gtQ5F1sLE2d_csqx9w6jeH_vMedwq73gkhRC-U25CEkW6ZYoMEXid8pf8xbmsdTgsxvEgpE4PNG4KWob260Ab1tT7U5k4aDYv_qjRMs6EjRYCTrytAZj-6mMWZqX4/s1600/twitter-icon.png" / > </a > </div>


hasil dari menggunakan css3 seperti berikut

Salin kode disini

/* CSS3 ANIMATION CHEAT SHEET Made by Justin Aguilar www.justinaguilar.com ============================================== tossing ============================================== */ .tossing{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /*