Infinite Square

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

<div class="square">
    <div class="square-triangle  square-triangle--top"></div>
    <div class="square-triangle  square-triangle--bottom"></div>
    <div class="square-triangle  square-triangle--left"></div>
    <div class="square-triangle  square-triangle--right"></div>
</div>

html,
body {
    height: 100%;
}
body {
    background-color: mediumseagreen;
    position: relative;
}

.square,
.square-triangle {
    position: absolute;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.square {
    background-color: coral;
    width:  15em;
    height: 15em;
    top: 50%;
    left: 50%;
    animation-name: square-master;
    transform-origin: center;
    transform: translate3d(-50%, -50%, 0);
}

.square-triangle {
    width:  0;
    height: 0;
}
.square-triangle--top {
    top:  0;
    left: 0;
    border-top:   7.5em solid coral;
    border-left:  7.5em solid transparent;
    border-right: 7.5em solid transparent;
    transform-origin: center top;
    animation-name: square-triangle-vertical;
    .square:hover &,
    .square:focus & {
        border-top-color: olivedrab;
    }
}
.square-triangle--bottom {
    bottom: 0;
    left:   0;
    border-bottom: 7.5em solid coral;
    border-left:   7.5em solid transparent;
    border-right:  7.5em solid transparent;
    transform-origin: center bottom;
    animation-name: square-triangle-vertical;
    .square:hover &,
    .square:focus & {
        border-bottom-color: maroon;
    }
}
.square-triangle--left {
    top:  0;
    left: 0;
    border-left:   7.5em solid coral;
    border-bottom: 7.5em solid transparent;
    border-top:    7.5em solid transparent;
    transform-origin: left center;
    animation-name: square-triangle-horizontal;
    .square:hover &,
    .square:focus & {
        border-left-color: cadetblue;
    }
}
.square-triangle--right {
    top:   0;
    right: 0;
    border-right:  7.5em solid coral;
    border-bottom: 7.5em solid transparent;
    border-top:    7.5em solid transparent;
    transform-origin: right center;
    animation-name: square-triangle-horizontal;
    .square:hover &,
    .square:focus & {
        border-right-color: goldenrod;
    }
}

@keyframes square-master {
  0% {
    background-color: darken(coral, 10%);
    transform: translate3d(-50%, -50%, 0);
  }
  75% {
    background-color: coral;
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(.705);
  }
}

@keyframes square-triangle-vertical {
  0%, 10% {
    transform: none;
  }
  100% {
    transform: rotateX(180deg);
  }
}
@keyframes square-triangle-horizontal {
  0%, 10% {
    transform: none;
  }
  100% {
    transform: rotateY(180deg);
  }
}