Loading animation

HTML

<div class='wrapper'>
  <ul class='blocks'>
    <li class='block-1'></li>
    <li class='block-2'></li>
    <li class='block-3'></li>
    <li class='block-4'></li>
  </ul>
</div>

CSS

body, html {
	  width: 100%;
	  height: 100%;
	}
	
	body {
	  background-color: #efefef;
	}
	
	.wrapper {
	  height: 40px;
	  width: 40px;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  margin-top: -22.5px;
	  margin-left: -22.5px;
	}
	
	ul {
	  list-style-type: none;
	  margin: 0 auto;
	  padding: 0;
	  width: 82px;
	  height: 82px;
	  position: relative;
	  -moz-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  -webkit-transform: rotate(45deg);
	  transform: rotate(45deg);
	}
	ul li {
	  width: 2em;
	  height: 2em;
	  position: absolute;
	  
	  /*animation: dance 888ms infinite alternate;
	  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/
	  -moz-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  -webkit-transform: rotate(45deg);
	  transform: rotate(45deg);
    
	}
	
	.block-1 {
	  top: 0;
	  left: 0;
	  background:#0076aa;border-radius:4px;
	  
	}
	
	.block-2 {
	  top: 0;
	  right: 0;
	  background:#98bd81;
	  border-radius:4px;
	  
	}
	
	.block-3 {
	  bottom: 0;
	  right: 0;
	  background:#98bd81;
	  border-radius:4px;
	  
	}
	
	.block-4 {
	  bottom: 0;
	  left: 0;
	  background:#0076aa;
    border-radius:4px;
	}
	
	li.block-1 {
	  animation-delay: 222ms;
	}
	
	li.block-2 {
	  animation-delay: 444ms;
	}
	
	li.block-3 {
	  animation-delay: 666ms;
	}
	
	li.block-4 {
	  animation-delay: 888ms;
	}
	
	@keyframes dance {
	  to {
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1);
		
	  }
	}