css - 是否可以使用转换在两个 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 animations ^MDN 来完成(另见 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;
  }

}

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