Animated Box

animated-box.markdown

Animated Box

A Pen by Marian Ban on CodePen.

License.

index.html

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

style.scss

.box {
  position:absolute;
  top: 30%;
  left: 30%;
  width: 150px;
  height: 150px;
  background-color: blue;
  animation-name: animate;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  transform-origin: top;

  @keyframes animate {
    25% {
      transform-origin: top;
      transform: rotateX(0.5turn);
    }
    25.001% {
      transform: translateY(-100%);
      transform-origin: right;
    }
    50% {
      transform-origin: right;
      transform: 
        translateY(-100%)
        rotateY(0.5turn);
    }
    50.001% {
      transform-origin: bottom;
      transform: 
        translateY(-100%) 
        translateX(100%);
    }
    75% {
      transform-origin: bottom;
      transform: 
        translateX(100%)
        translateY(-100%)
        rotateX(0.5turn);
    }
    75.001% {
      transform-origin: left;
      transform: translateX(100%);
    }
    100% {
      transform-origin: left;
      transform: 
        translateX(100%) 
        rotateY(0.5turn);
    }
  }
}