<div class="ball"></div>
<div class="ball bouncing"></div>

/* assign animation "move" and "bounce" to ball element */

.ball {
  animation: .5s move infinite alternate linear;
}

.ball.bouncing {
  animation: .5s bounce infinite cubic-bezier(.1,.25,.1,1) alternate;
}




/* define keyframes */

@keyframes move {
  0% {
      transform: translateY(200%);
  }
  100% {
      transform: translateY(0);
  }
}


@keyframes bounce {
  0% {
      transform: translateY(200%);
  }
  100% {
      transform: translateY(0);
  }
}









/* base styles */

body {
  text-align: center;
  background: #fafafa;
  padding: 50px;
  text-align: center;
}

.ball {
  width: 10%;
  padding-bottom: 10%;
  border-radius: 50%;
  background: #2098d1;
  box-shadow: 0px 5px 0px rgba(0,0,0,0.2);
  margin-left: 10%;
  display: inline-block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.