Membuat Efek Jatuh Dengan CSS Pada Teks & Gambar

Membuat Efek Jatuh Dengan CSS Pada Teks & Gambar - Dari beberapa kode efek yang ada di template blog ini, saya coba untuk mengkombinasikannya menjadi efek yang lain seperti yang akan saya jelaskan pada artikel ini, efek jatuh. Efek jatuh ini bisa digunakan pada teks atau gambar dan penggunaannya pun cukup mudah karena hanya menggunakan kode css saja

PANDUAN TEMPLATE BLOG

Untuk membuat efek jatuh dengan css pada teks atau gambar seperti contoh diatas, caranya cukup mudah

• Login ke akun Blogger sobat
• Pilih menu Template >> Edit HTML
• Cari kode ]]></b:skin> atau </style>. Untuk mencari kode silahkan gunakan caranya disini
• Salin kode css berikut sebelum kode ]]></b:skin> atau </style>
• Kode CSS
  

  .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;}
  }

• Salin kode html berikut ini dimanapun yang ingin sobat berikan efek jatuh didalam blog sobat

• <div class="imganimasi animasijatuh"></div>

• Pemasangan efek jatuh pada teks
  

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

• Pemasangan efek jatuh pada gambar
  

  <div class="imganimasi animasijatuh"><img src="ganti-dengan-link-gambar-disini" /></div>

Tertarik menggunakan efek jatuh dengan css pada teks dan gambar seperti contoh diatas? Silahkan dan semoga bermanfaat