是否可以使用转换在两个css类之间创建一个循环？

Question

我想知道是否有可能在一个元素上的两个css类之间纯粹用CSS(显然是3)做一个循环.

例如,想象一下,我有一个错误对话框,我想它的background-color动画从red到yellow,而其font-size从上升18px到24px再减少回18px,不断做动画.

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


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

Answer 1

您可以使用CSS3动画^MDN(也参见W3C规范)

.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;
  }

}

演示 http://jsfiddle.net/gaby/ZtQRG/