<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="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;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  
  &:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    right: 0;
    margin: -400px 0 0 -600px;
    width: 700px;
    height: 800px;
    background-image: url(https://ryanbrownhill.github.io/images/posts/easing-curves/curves--var.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
  } 
}


.dot {
  position: absolute;

  transform-origin: bottom center;
  margin-top: 80px;
  border-radius: 70px;
  height: 70px;
  width: 70px;
  transform: translateY(0);
  animation: animation 5s infinite forwards;

  &:nth-child(1) {
    animation-timing-function: cubic-bezier(0,0,.6,1);
    background-color: #3fa9f5;
  }
  &:nth-child(2) {
    animation-timing-function: cubic-bezier(0,0,.3,1);
    background-color: #7ac943;
  }
  &:nth-child(3) {
    animation-timing-function: cubic-bezier(0,0,0,1);
    background-color: #ff931e;
  }  
  &:nth-child(4) {
     animation-timing-function: cubic-bezier(0,1,.5,1);
    background-color: #B87EE9;
  }
  &:nth-child(5) {
    animation-timing-function: cubic-bezier(0,1,0,1);
    background-color: #F78AE0;
    
  } 
@for $i from 1 through 5 {
    &:nth-child(#{$i}) {
      margin-left: ($i * 100px) ;
    } 
}
}

@keyframes animation {
  0% , 20% , 100% {
     transform: translateY(0);
  }
  50% , 80% {
     transform: translateY(-270px);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.