Efek Jatuh Pada Teks Dan Gambar Dengan Css

Efek Jatuh Pada Teks dan Gambar dengan CSS - mengenai efek jatuh teringat ulasan sebelumnya yakni bintang yang berjatuhan, namun kali ini efek jatuh kita lakuakan pada Teks dan Gambar. Efek jatuh pada teks dan gambar diciptakan mengunakan keyframes, untuk demonya Anda dapat melihatnya di bawah ini :

Untuk menciptakan efek jatuh pada teks atau gambar dengan CSS, caranya sebagai berikut:

1. Login ke akun Blogger
2. Pilih sajian Template >> Edit HTML
3. Kemudian Anda cari arahan ]]></b:skin>
4. Berikutnya terapkan arahan dibawah ini sebelum arahan ]]></b:skin>

.imganimasi{
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
}
.animasijatuh {
-webkit-animation-name: animasijatuh;
-moz-animation-name: animasijatuh;
-o-animation-name: animasijatuh;
animation-name: animasijatuh;
}
@-webkit-keyframes animasijatuh {
0%{-webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
20%, 60%{ -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
40%{-webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
80%{-webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
100%{-webkit-transform: translateY(700px); opacity: 0; }
}
@-moz-keyframes animasijatuh {
0%{-moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
20%, 60%{-moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
40%{-moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
80%{-moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
100%{-moz-transform: translateY(700px); opacity: 0;}
}
@-o-keyframes animasijatuh {
0%{-o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
20%, 60%{-o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
40%{-o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
80%{-o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
100%{-o-transform: translateY(700px); opacity: 0;}
}
@keyframes animasijatuh {
0%{transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out;}
20%, 60%{transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out;}
40%{transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out;}
80%{transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out;}
100%{transform: translateY(700px); opacity: 0;}
}

5. Selanjutnya pemasangan arahan HTML, pada Entri gres Mode HTML

Kode HTML dengan Teks

<div class="imganimasi animasijatuh">
Masukkan Teks Anda Disini
</div>

Kode HTML dengan Gambar

<div class="imganimasi animasijatuh">
<img src="URL Gambar" /></div>

Mudah buka, supaya bermanfaat!

Sumber http://www.websiteedukasi.com/