用于淡化背景颜色的 CSS 动画

【问题标题】：CSS Animation for fading background colors用于淡化背景颜色的 CSS 动画
【发布时间】：2012-06-08 08:42:28
【问题描述】：

有没有办法让按钮的背景颜色在悬停时从一种颜色变为另一种颜色并带有淡入淡出效果？我知道这可以在 javascript 中完成，但我宁愿只使用 css。

【问题讨论】：

“悬停时css背景变化”有appr。 2,8mio 点击...

标签： html css

【解决方案1】：

.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;  
}

【讨论】：

是的，我想。看到这个thread。

【解决方案2】：

试试这个css，

button{background-color:#888;}
button:hover{background-color:#CCC;}

HTML 是，

<button>Test</button>

工作代码：http://jsfiddle.net/HJmK9/

【讨论】：