Jumping Boxes

index.html

<div class="container">
  <div class="item item-1">item-1</div>
  <div class="item item-4">item-2</div>
  <div class="item item-2">item-2</div>
  <div class="item item-3">item-3</div>
</div>

jumping-boxes.markdown

Jumping Boxes

A Pen by Marian Ban on CodePen.

License.

style.scss

body {
  background: repeating-linear-gradient(
    to right, 
    transparent, 
    transparent 10%, 
    #eee 10%, 
    #eee 20%);
}

.container {
  position: absolute;
  top: 30%;
  left: 10%;
  display: flex;
  align-items: flex-end;
}
$radius: 6em;

.item.item-2 {
  animation-name: none;
  transform: translateX(300%);
  height: 30px;
}

.item.item-4 {
  animation-name: none;
  transform: translateX(0%);
  height: 30px;
}

.item {
  height: $radius;
  width: $radius;
  background-color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-duration: 2s;
  animation-name: jump;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0s;
  animation-timing-function: ease-in;
  margin-right: 4em;
}

@keyframes jump {
  0% { transform: rotate(-1turn) }
  50% { 
    transform: translate(150%, -100%) rotate(0.5turn);
    animation-timing-function: ease-out;
  } 
  100% { transform: translate(300%, 0) rotate(1turn) }
}