Scannerblog: Animasi Css3 bag1

Animasi menggunakan css3 Mengulas sedikit dari css3 yang dibuat oleh Justin Aguilar, bahwa untuk membuat animasi kita bisa memanfaatkan css3. Dibawah ini akan saya jelaskan animasi yang akan diterapkan pada source gambar.

berikut adalah css3 yang akan di gunakan.

.pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } }

letakkan kode css3 sebelum tag
]]></b:skin>
dan atau bisa juga menggunakan
style type

Untuk object animasi saya akan 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 object menggunakan div class 'pulse'
<div class='pulse'>
TARUH OBJECT DISINI
</div>

Sehingga menjadi

<div class='pulse'>

<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 penggunaan css3 diatas akan tampil seperti ini

Salin kode css3 disini

/* CSS3 ANIMATION CHEAT SHEET Made by Justin Aguilar www.justinaguilar.com */ .pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } }