Question

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

e.g。想象一下，我有一个错误框，我希望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/

Answer 2

盖比的回答是正确的。你需要和动画+关键帧，因为你可以循环它们（不像只使用过渡 - 你不能循环过渡）。

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

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

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

2 个答案: