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);
	}
}