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

Question

我想知道是否有可能在一个元素上的两个 CSS 类之间纯粹用 CSS（显然是 3 个）创建一个循环。

例如，想象一下我有一个错误框，我希望它background-color的动画从redto 开始，yellow而它从tofont-size增加，然后又减少回，并不断地做这个动画。18px24px18px

.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/

Answer 2

Gaby's answer is correct. You need and animation + keyframes because you can loop them (unlike using only a transition--you can't loop a transition).

.state-loop's animation properties could be shortened to:

.state-loop {
    animation: sizeandcolor 2s infinite alternate;
}