<div id="container" class="hide">
  <div></div>
  <div></div>
 </div>

html, body {
    height: 100%; 
    margin: 0;	
 }
body {
    font: normal 1em / 1.62em sans-serif;
    background-color: #010;
    background-image:url( https://i.ibb.co/rMb3jQP/soccer.jpg );
    background-repeat:no-repeat;
    background-size: 100vw auto; 
    background-position: center;
 } 
#button {
 	  position:absolute;
 	  top: -999em;
 	  left: -999em;
 }
#button:checked ~ #container  div:nth-of-type(1) {
	  display: block;
 }
#button:checked ~ #container  div:nth-of-type(2) {
	  display: block;
 }
#button:checked ~ label::before{
	  content:'hide ';
}
 label {
    display: block;
 	  width: 8em;
 	  padding: 0.5em 0;
 	  margin: 0.5em auto;
 	  border: 0.3em solid #b5c2c2;
 	  border-radius: 0.5em;
 	  background-color: #fff;
 	  text-align: center;
 	  cursor: pointer;
 }
 label::before {
 	  content:'show ';
 }
 #container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate( -50%, 0 );
 }
.hide {
    display:none;
 }
#container div:nth-of-type(1) {
    width: 8.75em;  
    height: 8.75em;
    background-image: url( https://i.ibb.co/ZS22388/soccer-ball-png-clip-art-soccer-ball-11563100954keemcoojya.png );
    background-size: 35% auto;
    background-position: center;
    background-repeat: no-repeat;
    animation: bounce 2s 1 forwards;
    animation-iteration-count: 1;  
 }
#container div:nth-of-type(2) {
    width: 3.124em;
    height: 2.25em;
    margin-left: 3em;
    border-radius: 3.124em;
    transform: scaleY( 0.25 );
    filter: blur( 0.75em ); 
    background-color: #020;
    animation: shadow-scale 2s 1;
    animation-iteration-count: 1;
    animation-delay: 0.12s;
 } 
@keyframes bounce {
  0% {
      margin-bottom: 126px;
      animation-timing-function: ease-in;
      transform:rotate( 0deg );
	}
 16% {
      margin-bottom: -64px;
      animation-timing-function: ease-out;
	}
 32% {
      margin-bottom: 76px;
      animation-timing-function: ease-in;
	}
 48% {
      margin-bottom: -64px;
      animation-timing-function: ease-out;
	}
 62% {
      margin-bottom: 26px;
      animation-timing-function: ease-in;
	}
 78% {
      margin-bottom: -64px;
      animation-timing-function: ease-out;
	}
 90% {
      margin-bottom: -24px;
      animation-timing-function: ease-in;
	}
100% {
      margin-bottom:-64px;
      animation-timing-function: ease-out;transform:rotate( 360deg );
	}
 }
@keyframes shadow-scale {
  0% {
      transform: scale(1) scaleY(0.25);
   }
 40% {
      transform: scale(1) scaleY(0.25);
   }
 65% {
      transform: scale(1) scaleY(0.25);
   } 
 82% {
      transform: scale(1) scaleY(0.25);
   }
 25%,
 55%,
 75%,
 87%,
 97%,
100% {
      transform: scale(0.75) scaleY(0.25);
      animation-timing-function: ease-out; 
   } 
 }
@media ( max-width: 39em ) {
body {
    background-size: 150vw auto; 
  } 
 }
@media ( max-width: 24em ) {
body {
    background-size: 250vw auto; 
  } 
 }
(function(d) {
   'use strict';
   d.addEventListener('keydown', function(event) {

   if ( event.key==='ArrowUp'){
	    d.getElementById('container').classList.remove('hide');
      }
   if ( event.key=='ArrowDown'){
	    d.getElementById('container').classList.add('hide');
	   } 
   }, false);
}(document));

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.