CSS3：背景颜色到透明的过渡

Question

我想在div 中进行转换：

• 以background-color:rgba(242, 245, 169, 1);开头

  ... 3 秒后...

• 以background-color:rgba(242, 245, 169, 0);结尾

并且...在两个fases之间显示background-color:rgba(242, 245, 169, 0.9);，background-color:rgba(242, 245, 169, 0,8);，background-color:rgba(242, 245, 169, 0.7);...

类似于this solution，但没有':hover'。直接。

我怎样才能得到它？

谢谢。

Answer 1

http://jsfiddle.net/BramVanroy/hakomq5L/

div {
    width: 100px;
    height: 100px;
    animation: fade 3s forwards;
    background-color:rgba(242, 245, 169, 1);
}

@keyframes fade {
    from {background-color:rgba(242, 245, 169, 1);}
    to {background-color:rgba(242, 245, 169, 0);}
}

Answer 2

只需为此使用动画即可。我的解决方案是可重复使用的，因为我使用了 opacity 属性，所以你可以使用任何你想要的颜色。

工作 JSFIDDLE：http://jsfiddle.net/5m1pb227/1/

HTML

<div class="box">

CSS

.box {
  background-color:rgb(242, 245, 169);
  width:100px; height:100px;
  position: relative;
  animation: myfadeIn 2s;  
}


@keyframes myfadeIn {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

Answer 3

除了其他正确答案之外，如果悬停元素不是 div 而是链接，并且您正在转换为/从 rgba 颜色转换，除非您指定链接不是内联的，否则 Chrome 62 不会转换它，即：

CSS

a {display:inline-block;}

如果悬停元素内嵌显示，由于某种原因，Chrome 不会为过渡设置动画。