* {
  box-sizing: 
  border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 20px;
  height: 400px; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.one{

	background-color:#fa9fb5;
}
.two{
	background-color:#fde0dd;
	
}
.three{
	background-color:#49006a;
}
.four{
	background-color:#ae017e;
}
.five{
	background-color:#49006a;
}
.six{
	background-color:#ae017e;
}
.seven{
	background-color:#fa9fb5;
	
}
.eight{
	background-color:#fde0dd;
}

.square{
	position:absolute;
	width:200px;
	height:200px;
	background-color: red;
	z-index:3;
	margin-left: 100px;
	margin-top: 100px;
}
.square2{
	position:absolute;
	width:200px;
	height:200px;
	background-color: red;
	z-index:3;
	margin-left: 100px;
	margin-top: 100px;
}
.s1{
	background-color:#ae017e;
}
.s2{
	background-color:#fa9fb5;
}
.s3{
	background-color:#fde0dd;
}
.s4{
	background-color:#49006a;
}
.s5{
	background-color:#fde0dd;
}
.s6{
	background-color:#49006a;
}
.s7{
	background-color:#ae017e;
}
.s8{
	background-color:#fa9fb5;
}
@keyframes spinType {
    0% {
        transform: rotate(0.3turn);
        opacity: 0.5;
    }
    60% {
        transform: rotate(0.6turn);
        background-color: white;
        opacity: 0.3;
        width:80px;
        height:80px;
        border-radius: 50%;
    }
    100% {
        transform: rotate(1turn);
    }
}
@keyframes spinTypeTwo {
    0% {
        transform: rotate(-0.3turn);
        opacity: 0.5;
    }
    60% {
        transform: rotate(-0.6turn);
        background-color: white;
        opacity: 0.3;
        width:80px;
        height:80px;
        border-radius: 50%;
    }
    100% {
        transform: rotate(-1turn);
    }
}

div.square{
	animation: spinType 5s infinite;
	animation-delay: 3.5s;
	
}
div.square2{
	animation: spinTypeTwo 5s infinite;
	animation-delay: 3.5s;
}