Question

I want know if its possible to make a loop purely in CSS (obviously 3) between two css classes on an element.

e.g. Imagine that I have an error box and I want its background-color to animation from red to yellow while its font-size is increasing from 18px to 24px then decreasing back to 18px and do this animation continuously.

.state-red {
   background-color: red;
   color: yellow;
   font-size: 18px;
}


.state-yellow {
   background-color: yellow;
   color: red;
   font-size: 24px;
}

Answer 1

You can do it with CSS3 animations ^MDN (also see the W3C Specs)

.state-loop{
    animation-duration:2s;
    animation-name: sizeandcolor;
    animation-iteration-count: infinite;  
    animation-direction: alternate;
}

@keyframes sizeandcolor{    
  from{
   background-color: red;
   color: yellow;
   font-size: 18px;
  }

  to{
   background-color: yellow;
   color: red;
   font-size: 24px;
  }

}

Demo at http://jsfiddle.net/gaby/ZtQRG/