@keyframes cssrocks {
  from { background-color: yellow; }
  to   { background-color: red; }
}

box {
  background-color: blue;
  animation-fill-mode: both;
  animation-duration: 100s;
  padding: 1px;
  background-clip: content-box;
  animation-timing-function: linear;
}

.after {
  animation-name: cssrocks;
  animation-delay: -10000s;
}

.before {
  animation-name: cssrocks;
  animation-delay: 10000s;
}

.normal {
  animation-direction: normal;
}

.reverse {
  animation-direction: reverse;
}

.alternate {
  animation-direction: alternate;
}

.alternate-reverse {
  animation-direction: alternate-reverse;
}

.x0 {
  animation-iteration-count: 0;
}

.x02 {
  animation-iteration-count: 0.2;
}

.x1 {
  animation-iteration-count: 1;
}

.x12 {
  animation-iteration-count: 1.2;
}

.x2 {
  animation-iteration-count: 2;
}

.x22 {
  animation-iteration-count: 2.2;
}

.yellow {
  animation: none;
  background-color: yellow;
}

.red {
  animation: none;
  background-color: red;
}

.darkorange {
  animation: none;
  background-color: rgb(255,51,0);
}

.lightorange {
  animation: none;
  background-color: rgb(255,204,0);
}