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

【问题标题】：Is it possible to create a loop between two css classes using transitions?是否可以使用转换在两个 css 类之间创建循环？
【发布时间】：2012-12-03 03:28:19
【问题描述】：

我想知道是否有可能在一个元素的两个 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;
}

【问题讨论】：

标签： css css-transitions css-animations

【解决方案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/

【讨论】：

【解决方案2】：

盖比的回答是正确的。您需要动画 + 关键帧，因为您可以循环它们（与仅使用过渡不同——您不能循环过渡）。

.state-loop 的动画属性可以缩短为：

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

【讨论】：