<div class="none"></div>
<div class="forwards"></div>
<div class="backwards"></div>
<div class="both"></div>
div {
  width: 100px;
  height: 100px;
  border-radius:50%;
  float:left;
  margin:2%;
  position:relative;
}
div:after {
  content: attr(class);
  position:relative;
  top:40px;
  left:20px;
  color:#fff;
}
.none {
  background:black;
  animation: color 2s 1 none;
}
.forwards {
  background:black;
  animation: color 2s 1 forwards;
}
.backwards {
  background:black;
  animation: color 2s 1 backwards;
}
.both {
  background:black;
  animation: color 2s 1 both;
}
@keyframes color {
  0% {
    border-radius:50%;
    top:0;
    left:0;
    background:blue;
  }
  100% {
    background: orange;
    top:200px;
    left:0;
    width:100px;
    border-radius:2%;
  }
}
div:nth-child(1) {animation-delay:0s;}
div:nth-child(2) {animation-delay:2s;}
div:nth-child(3) {animation-delay:4s;}
div:nth-child(4) {animation-delay:6s;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.