web-dev-qa-db-ja.com

css3ボタンの背景色の無限の遷移

Css3のみを使用して、ボタンの背景色を灰色から青色にフェードさせてから灰色に戻す方法はありますか？良い例は、デフォルトのアクションボタンがココアであることです。これはJavaScriptで実行できることはわかっていますが、CSSを使用するだけです。

csscss-transitionscss-animations
19
Eric Pigeon

こんにちはCSS3アニメーションでボタンを作成しました。あなたの質問に近いことを願っています：-

[〜＃〜] html [〜＃〜]

<input type="submit" value="submit" class="button" />

[〜＃〜] css [〜＃〜]

.button {
    width:100px;
    height:20px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s infinite; /* Firefox */
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst /* Firefox */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

デモを見てください：- http://jsbin.com/osohak/7/edit

cSS3トランジションとアニメーションの詳細 http://css3.bradshawenterprises.com/cfimg/

38
Shailender Arora

hoverなどでフェードアニメーションが必要な場合は、 CSS3遷移プロパティ が解決策です。

編集：

.btn {
  background-color: lightblue;
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* IE10 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;
}  

.btn:hover {
  background-color: lightgreen;  
}
5
Tooraj Jam