<h2>Ease Out Curve Spacing</h2>
<div class="container">
  <div class="spacing--dot"></div>
</div>
@import "compass/css3";

* {
  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: -400px 0 0 -400px;
    width: 700px;
    height: 800px;
    background-image: url(https://ryanbrownhill.github.io/images/posts/easing-curves/spacing--easeout.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  } 
}

.spacing--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: ani--easeout 2.5s infinite;
}

@keyframes ani--easeout {
  0% {
     transform: translateY(0);
     animation-timing-function: ease-out;
  }
  50% {
     transform: translateY(-270px);
     animation-timing-function: ease-in;
  }
  100% {
      transform: translateY(0);
      animation-timing-function: ease-out;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.