<div class="container">
  <div class="bounce--dot"></div>
</div>

* {
  margin: 0;
  padding: 0;
  position: relative;
}

html, body {
  height: 100%;
}

h2 {
  position: absolute;
  top: 25%;
  left: 40%;
  font-family: "Arial", sans-serif;
}

.container {
  position: absolute;
  background-color: #bada55;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  
  &:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    right: 0;
    margin: -425px 0 0 -600px;
    width: 700px;
    height: 800px;
    background-image: url(https://ryanbrownhill.github.io/images/posts/easing-curves/curve--bounce.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 73%;
  } 
}

.bounce--dot {
  position: absolute;
  background-color: #3fa9f5;
  transform-origin: bottom center;
  margin-left: 120px;
  margin-top: 80px;
  border-radius: 70px;
  height: 70px;
  width: 70px;
  transform: translateY(0);
  animation: bounce 2.5s infinite;
  animation-timing-function: cubic-bezier(.71,-0.88,.32,1.68);
}

@keyframes bounce {
  0% {
     transform: translateY(0);
  }
  50% {
     transform: translateY(-270px);
  }
  100% {
      transform: translateY(0);
  }
}