color_scrub_loop_01

by Nic Fontaine

HTML

<div>
</div>

CSS

div {
  height: 200px;
  width: 200px;
  animation-name: scrub-bg-01;
  -webkit-animation-name: scrub-bg-01;
  -moz-animation-name: scrub-bg-01;
  animation-duration: 50s;
  -webkit-animation-duration: 50s;
  -moz-animation-duration: 50s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
}

@keyframes scrub-bg-01 {
  0% {background-color: red;}
  12.5% {background-color: orange;}
  25% {background-color: yellow;}
  37.5% {background-color: green;}
  50% {background-color: blue;}
  62.5% {background-color: indigo;}
  75% {background-color: violet;}
  100% {background-color: red;}
}

@-webkit-keyframes scrub-bg-01 {
  0% {background-color: red;}
  12.5% {background-color: orange;}
  25% {background-color: yellow;}
  37.5% {background-color: green;}
  50% {background-color: blue;}
  62.5% {background-color: indigo;}
  75% {background-color: violet;}
  100% {background-color: red;}
}

@-moz-keyframes scrub-bg-01 {
  0% {background-color: red;}
  12.5% {background-color: orange;}
  25% {background-color: yellow;}
  37.5% {background-color: green;}
  50% {background-color: blue;}
  62.5% {background-color: indigo;}
  75% {background-color: violet;}
  100% {background-color: red;}
}