Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#one{
  position: absolute;
  top: 25%;
  left: 25%;
  height: 50%;
  width: 50%;
  border-style: solid;
  border-width: 5px;
  background: rgba(0,0,0,0);
 transform: scale(1);
	animation: pulse 5.11s infinite, rotationA  5.11s infinite; 
}

#two{
  position: absolute;
  top: 25%;
  left: 25%;
  height: 50%;
  width: 50%;
  border-style: solid;
  border-width: 5px;
  background: rgba(0,0,255,.1);
  transform: scale(1);
	animation: pulse 10.213s infinite, rotationA 10.213s infinite; 
}

#three{
  position: absolute;
  top: 25%;
  left: 25%;
  height: 50%;
  width: 50%;
  border-style: solid;
  border-width: 5px;
  background: rgba(0,255,0,0.1);
  transform: scale(1);
  
    animation: rotationA 9.125s infinite, pulse 9.125s infinite; 
}

#four{
  position: absolute;
  top: 25%;
  left: 25%;
  height: 50%;
  width: 50%;
  border-style: solid;
  border-width: 5px;
  background: rgba(255,0,0,0.1);
  
  animation: pulse 13s infinite; 
  animation: rotationA 15s infinite, pusle 15s infinite; 
}

#five{
  position: absolute;
  
  height: 100%;
  width: 100%;
  border-style: solid;
  border-width: 5px;
  background: rgba(0,0,0,0);
 transform: scale(1);
	animation: pulse 5.231s infinite, rotationA  5.231s infinite; 
}

#six{
  position: absolute;
  
  height: 100%;
  width: 100%;
  border-style: solid;
  border-width: 5px;
  background: rgba(0,0,255,.1);
  transform: scale(1);
	animation: pulse 10s infinite, rotationA 10s infinite; 
}

#seven{
  position: absolute;
  height: 100%;
  width: 100%;
  border-style: solid;
  border-width: 5px;
  background: rgba(0,255,0,0.1);
  transform: scale(1);  
    animation: rotationA 9s infinite, pulse 9s infinite; 
}

#eight{
  position: absolute;
  ;
  height: 100%;
  width: 100%;
  border-style: solid;
  border-width: 5px;
  background: rgba(255,0,0,0.1);  
  animation: rotationA 15s infinite, pusle 15s infinite; 
}

@keyframes pulse {
	0% {
		transform: scale(2);
	
	}

70% {
		transform: scale(1);
	
	}

100% {
		transform: scale(2);
	
	}
}

@keyframes rotationA {
	50% {transform: rotate(180deg);
    
  }
}

Frontend Forever App