Edit in JSFiddle

<div class="loader">
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
</div>

.loader {
    text-align: center;  
    width:200px;
    height:200px;   
    margin:30px auto;
}
.loader span {
    display: inline-block;
    border:1px solid black;
    float:left;
    vertical-align: middle;
    width: 28%;
    height: 28%;
    margin: 1% 1%;
    background: red;
    border-radius: 5px;
    -webkit-animation: loader 4s infinite alternate;
}
.loader span:nth-of-type(1) {
    -webkit-animation-delay: 3s;
    background: yellow;
}
.loader span:nth-of-type(2) {
    -webkit-animation-delay: .5s;
    background: black;
}
.loader span:nth-of-type(3) {
    -webkit-animation-delay: 2.5s;
    background: green;
}
.loader span:nth-of-type(4) {
    -webkit-animation-delay: 3.5s;
    background: blue;
}
.loader span:nth-of-type(6) {
    -webkit-animation-delay: 1s;
    background: green;
}
.loader span:nth-of-type(7) {
    -webkit-animation-delay: 3.5s;
    background: orange;
}
.loader span:nth-of-type(8) {
    -webkit-animation-delay: 4s;
    background: yellow;
}
.loader span:nth-of-type(9) {
    -webkit-animation-delay: 1s;
    background: green;
}
@-webkit-keyframes loader {
  0% {
  }
  90% {
    background: red;
  }
}