3

要素上の2つのcssクラス間で純粋にCSS（明らかに3）でループを作成できるかどうかを知りたいです。

たとえば、エラーボックスがあり、それがからに増加し​​ている間に、からにbackground-colorアニメーションを作成し、次にに減少して、このアニメーションを継続的に実行したいとします。redyellowfont-size18px24px18px

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


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

2 に答える 2

5

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/でのデモ

于 2012-12-02T13:19:03.860 に答える
1

ギャビーの答えは正しいです。アニメーションとキーフレームはループできるので必要です（トランジションのみを使用する場合とは異なり、トランジションをループすることはできません）。

.state-loopのアニメーションプロパティは次のように短縮できます。

.state-loop {
    animation: sizeandcolor 2s infinite alternate;
}
于 2012-12-02T19:28:19.633 に答える