moving ball

In this example below you will see how to do a moving ball with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nen ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>moving ball</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  <div class="stage">
    <div class="traveler">
      <div class="bouncer">
        <!-- -->
      </div>
     </div>
  </div>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/nen/moving-ball-VbwgqO */
/* keyframes definition for WebKit browsers */

@-webkit-keyframes travel {
  from { left: 0;     }
  to   { left: 640px; }
}

@-webkit-keyframes bounce {
  from, to  {
    bottom: 0;
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    bottom: 220px;
    -webkit-animation-timing-function: ease-in;
  }
}

@-webkit-keyframes spin {
  from {                                     }
  to   { -webkit-transform: rotateZ(360deg); }
}

/* keyframes definition for other browsers */

@keyframes travel {
  from { left: 0;     }
  to   { left: 640px; }
}

@keyframes bounce {
  from, to  {
    bottom: 0;
    animation-timing-function: ease-out;
  }
  50% {
    bottom: 220px;
    animation-timing-function: ease-in;
  }
}

@keyframes spin {
  from {
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* styles for the stage and animated elements */

.body {
 background: #000000;  
}

.stage {
  position: relative;
  margin: auto;
  margin-top: 15%;
  width: 600px;
  height: 600px;
  background: #000000;
}

.traveler {
  position: absolute;
  width: 20px;
  height: 240px;
  
  -webkit-animation-name: travel;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 4.8s;

  animation-name: travel;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 4.8s;
}

.bouncer {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: red;
  background: -webkit-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
  background: -moz-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
  background: -o-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
  background: -ms-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
  background: radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;

  -webkit-animation-name: bounce, spin;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 4.2s;

  animation-name: bounce, spin;
  animation-iteration-count: infinite;
  animation-duration: 4.2s;
}

Comments