/*
  this is a code sample for CSS3 animations. In my samples I only include webkit properties. all other vendor prefixes are needed for animations.
*/

/*
  base styles that are unrelated to the code sample
*/
.one {
  width: 300px;
  height: 300px;
  margin: 2em auto;
  border: 1px solid gray;
}

/*
  set up keyframe animation first and label it. I named it test, but you can call it whatever you like. Then call it inside the class declaration below, just like a function.
*/
@-webkit-keyframes test {
  from {
    background: rgb(50,50,50);
  }
  to {
    background: rgb(255,80,0);
  }
}

@keyframes test {
  from {
    background: rgb(50,50,50);
  }
  to {
    background: rgb(255,80,0);
  }
}

/*
  call the animation
*/
.one {
  -moz-animation: test 5s;
  -webkit-animation: test 5s;
  -o-animation: test 5s;
  animation: test 5s;  
}