.square
View Compiled
@import "compass/css3";

$b: #2c3e50;
$s: #2980b9;
$c: #f39c12;
$speed: .7s;
$size: 20vw;

body {
  background: $b;
}

.square {
  width: 1em;
  height: 1em;
  background: $s;
  font-size: 200px;
  font-size: $size;
  animation: spin $speed linear infinite, to-circle $speed infinite alternate linear;
}


@keyframes spin {
  to {
    transform: rotateY(.5turn);
  }
}


@keyframes to-circle {
  0%,49% {  // square
    border-radius: 0; 
    background: $s;
  }
  50%,100% { // circle
    border-radius: 1em;
    background: $c;
  }  
  // go to bed
}
View Compiled

External CSS

  1. https://codepen.io/katydecorah/pen/6459e06b04c434565f31e06ee33ca866.scss

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js