Membuat Portal Bagian 3 : Membuat animasi di Box Efect bounce

Sebelumnya kita sudah Mempelajari membuat portal dengan menambahkan background slide show , maka sekarang kita akan menambahkan cara membuat efect bounce di box portalnya . 

Sebelumnya tampilan dari portalnya adalah seperti di bawah ini :

jika sebelumnya pada hover box nya adalah cuma warna grey , maka kali ini saya akan menambahkan box degan hover bounce .

Pengertian 

Bounce adalah efect yang di gunakan untuk membuat box menjadi memantul ke atas dan balik kembali lagi . efek ini sagat bagus jika di kombinasi sama portal ini ,

Membuat efect bounce

Langkah Pertama :  lihat file layout.css .

Terdapat script :

.bungkus:hover{
background-color: rgba(216, 216, 216, 0.54);
}

 di ganti dengan :

.bungkus:hover{
  -webkit-transition: ease-in 0.2s;
  -moz-transition: ease-in 0.2s;
  -o-transition: ease-in 0.2s;
  transition: ease-in 0.2s;
  animation-name: bounce;
  animation-duration: 1s;
  animation-fill-mode: both;
  background-color: rgba(216, 216, 216, 0.54);
} 

dan selanjutnya tambah script di bawah ini :

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

maka tampilanya akan seperti di bawah ini :

Kesimpulan : 

Terdapat banyak efect selain efek bounce , sekilan unutk membuat portalnya .