<div class="frame">
	<div class="center">
		<div class="top"></div>
		<div class="icon"></div>
		<div class="bottom"></div>
	</div>
</div>
@color-background: #a393eb;
@color-primary: #87dfd6;
@color-secondary: darken(#87dfd6, 15%);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: @color-background;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.icon {
	z-index: 10;
	width: 100px;
	height: 100px;
	background-color: @color-primary;
	transform: rotate(45deg);
	animation: changing 0.5s 2.5s forwards;
	&::before {
		content: "";
		position: absolute;
		bottom: -60px; right: 60px;
		width: 100px; height: 100px;
		border-radius: 50%;
		background-color: @color-background;
	}
	&::after {
		content: "";
		position: absolute;
		top: -60px; left: 60px;
		width: 100px; height: 100px;
		border-radius: 50%;
		background-color: @color-background;
	}
}

.top {
	position: absolute;
	top: 60px;
	width: 100px;
	height: 100px;
	background-color: @color-primary;
	transform: rotate(45deg);
	animation: move-top 0.5s 2s linear forwards;
	&::after {
		content: "";
		position: absolute;
		bottom: 10px; right: 10px;
		width: 100px; height: 100px;
		background-color: @color-background;
	}
}

.bottom {
	position: absolute;
	bottom: 60px;
	width: 100px;
	height: 100px;
	background-color: @color-primary;
	transform: rotate(45deg);
	animation: move-bottom 0.5s 2s linear forwards;
	&::after {
		content: "";
		position: absolute;
		top: 10px; left: 10px;
		width: 100px; height: 100px;
		background-color: @color-background;
	}
}

@keyframes move-top {
	0% { top: 60px; }
	100% { top: 20px; }
}

@keyframes move-bottom {
	0% { bottom: 60px; }
	100% { bottom: 20px; }
}

@keyframes changing {
	0% { background-color: @color-primary; }
	100% { background-color: @color-secondary; }
}
// jQuery v3.3.1 is supported

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://100dayscss.com/codepen/js/jquery.min.js