Menghilangkan | Memunculkan Obyek Dengan CSS3 Animasi

Menghilangkan | Memunculkan Obyek Dengan CSS3 Animasi - Magic, mungkin ini sempat terlintas dipikiran kita saat kagum melihat aksi pesulap yang dapat menghilangkan dan memunculkan kembali suatu obyek dari box yang nyata terlihat kosong, namun jika kita sadari semuanya itu adalah hanya sebuah trik murni dengan kecepatan fisik si pesulap. Kesempatan kali ini trik itu akan saya deklarasikan dalam sebuah permainan di blog tentunya dengan CSS3 Animasi.

Kali ini saya mengambil tema bola sebagai obyeknya, agar bola dapat memantul, saya menggunakan CSS3 Animasi seperti ini animation: jump 1s infinite, agar pantulan bola selalu pada posisi satu titik, saya gunakan CSS position:fixed. Nah..!! elemen obyek sudah terbentuk yang kurang lebih seperti terlihat pada gambar dibawah ini

Kode Terkait -

Efek Keyframes Show Pada Gambar Hover

cursor: pointer, saya gunakan sebagai perintah untuk menghilangkan dan memunculkan kembali obyek tersebut. Detailnya saat klik ditahan pada obyek maka secara perlahan obyek akan menghilang, dan sebaliknya saat klik dilepas obyek akan muncul, dan hasilnya dapat Anda lihat pada DEMO SHOW dibawah ini



DEMO SHOW


Element HTML

<div id="ballWrapper">
   <div id="ball">
   </div>
        <div id="ballShadow">

          . . .

        </div>
</div>

CSS3 Animasi

/* Animations */
@-webkit-keyframes jump {
 0% {top: 0;
  -webkit-animation-timing-function: ease-in;
 }
 40% {}
 50% {top: 140px;
  height: 140px;
  -webkit-animation-timing-function: ease-out;
 }
 55% {top: 160px; height: 120px; border-radius: 70px / 60px;
  -webkit-animation-timing-function: ease-in;}
 65% {top: 120px; height: 140px; border-radius: 70px;
  -webkit-animation-timing-function: ease-out;}
 95% {
  top: 0; 
  -webkit-animation-timing-function: ease-in;
 }
 100% {top: 0;
  -webkit-animation-timing-function: ease-in;
 }
}
/* Isi dengan value yang sama */
@-moz-keyframes jump {...}
@-o-keyframes jump {...}
@-ms-keyframes jump {...}
@keyframes jump {...}

@-webkit-keyframes shrink {
 0% {
  bottom: 0;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
  border-radius: 30px / 40px;
  -webkit-animation-timing-function: ease-in;
 }
 50% {
  bottom: 30px;
  margin-left: -10px;
  width: 20px;
  height: 5px;
  background: rgba(20, 20, 20, .3);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
  border-radius: 20px / 20px;
  -webkit-animation-timing-function: ease-out;
 }
 100% {
  bottom: 0;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
  border-radius: 30px / 40px;
  -webkit-animation-timing-function: ease-in;
 }
}
/* Isi dengan value yang sama */
@-moz-keyframes shrink {...}
@-o-keyframes shrink {...}
@-ms-keyframes shrink {...}
@keyframes shrink {...}

Elemen CSS

#ballWrapper {
 width: 140px;
 height: 300px;
 position: fixed;
 left: 50%;
 top: 35%;
 margin-left: -70px;
 z-index: 100;
 transform: scale(1);
 transition: all 5s linear 0s;
 cursor: pointer;
}

#ballWrapper:active {
 transform: scale(0);
 cursor: pointer;
}

#ball {
 width: 140px;
 height: 140px;
 border-radius: 70px;
 background: rgb(187,187,187);

#ball::after {
 content: "";
 width: 80px;
 height: 40px;
 position: absolute;
 left: 30px;
 top: 10px;
 z-index: 10;
}

#ballShadow {
 position: absolute;
 left: 50%;
 bottom: 0;
 z-index: 10;
 margin-left: -30px;
 width: 60px;
 height: 75px;
 background: rgba(20, 20, 20, .1);
 box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
 border-radius: 30px / 40px;
 transform: scaleY(.3);
 animation: shrink 1s infinite;
}

Tolong...!! dibantu ya, prok..koprok..koprok..jadi apa? hayoo..!! mungkin inilah yang dilakukan pesulap pak. TARNO kali ya, hehe..!!

Semoga bermanfaat. Happy blogging