Efek Jatuh Pada Teks dan Gambar dengan CSS

Efek Jatuh Pada Teks dan Gambar dengan CSS - mengenai efek jatuh teringat ulasan sebelumnya yaitu 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 bisa melihatnya di bawah ini :

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

1. Login ke akun Blogger
2. Pilih menu Template >> Edit HTML
3. Kemudian Anda cari kode ]]></b:skin>
4. Berikutnya terapkan kode dibawah ini sebelum kode ]]></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 kode HTML, pada Entri baru 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, semoga bermanfaat!