@Keyframes 1.8.2 | Overloadered 3

index.html

<div class="box"></div>
<div class="box"></div>

keyframes-1-8-2-overloadered-3.markdown

@keyframes 1.8.2 | Overloadered 3

A Pen by Shaw on CodePen.

License.

style.scss

$duration: 4s;

.box {
  height: 1em;
  width: 1em;
  font-size: 10vmin;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -.5em;
  transform-origin: top right;
  
  animation: box-flip $duration ease-in-out infinite;
  
  &:nth-child(2) {
    animation-delay: #{$duration / -2};
  }
}

@keyframes box-flip {
  #{percentage(1/6)} {
    transform: rotate(0);
  }
  #{percentage(2/6)} {
    transform: rotate(.5turn);
  }
  #{percentage(3/6)} {
    transform: rotate(.5turn);
  }
  #{percentage(4/6)} {
    transform: rotate(.75turn);
  }
  #{percentage(5/6)} {
    transform: rotate(.75turn);
  }
  #{percentage(6/6)} {
    transform: rotate(1turn);
  }
}

/* ---------------------------------- */

html, body {
  background: #000;
  height: 100%;
  width: 100%;
  display: flex;
}