@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