@keyframes anim {
  from { color: red; }
  50% { color: red; }
  50.000001% { color: yellow; }
  to { color: yellow; }
}

.direction-normal, .direction-reverse, .direction-alternate, .direction-alternate-reverse {
  animation: anim 20s infinite;
}

.direction-normal {
  animation-direction: normal;
}

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

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

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

.delay-5s {
  animation-delay: -5s;
}

.delay-15s {
  animation-delay: -15s;
}

.delay-25s {
  animation-delay: -25s;
}

.delay-35s {
  animation-delay: -35s;
}

.delay-45s {
  animation-delay: -45s;
}

.delay-55s {
  animation-delay: -55s;
}

.delay-65s {
  animation-delay: -65s;
}

.delay-75s {
  animation-delay: -75s;
}