[CSS3] Animation

CSS

p.test {
animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite;
-webkit-animation:myfirst 5s infinite;
-o-animation:myfirst 5s infinite;
}

@keyframes myfirst {
  0% {background:#ffffff; width:150px; height:150px; }
  25%{background:#ffff66; width:175px; height:175px; }
  50%{background:#ffaa00; width:200px; height:200px; }
  75%{background:#ff6600; width:225px; height:225px; }
  100%{background:#ff0000; width:250px; height:255px; }
}

@-moz-keyframes myfirst {
  0% {background:#ffffff; width:150px; height:150px; }
  25%{background:#ffff66; width:175px; height:175px; }
  50%{background:#ffaa00; width:200px; height:200px; }
  75%{background:#ff6600; width:225px; height:225px; }
  100%{background:#ff0000; width:250px; height:255px; }
}
@-webkit-keyframes myfirst {
  0% {background:#ffffff; width:150px; height:150px; }
  25%{background:#ffff66; width:175px; height:175px; }
  50%{background:#ffaa00; width:200px; height:200px; }
  75%{background:#ff6600; width:225px; height:225px; }
  100%{background:#ff0000; width:250px; height:255px; }
}
@-o-keyframes myfirst {
  0% {background:#ffffff; width:150px; height:150px; }
  25%{background:#ffff66; width:175px; height:175px; }
  50%{background:#ffaa00; width:200px; height:200px; }
  75%{background:#ff6600; width:225px; height:225px; }
  100%{background:#ff0000; width:250px; height:255px; }
}

See the Pen ZrVeKx by daeyun (@daeyun) on CodePen.