CSS3：背景颜色过渡到透明

Question

我希望在div中进行转换：

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

  开头

  ...... 3秒后......

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

结束

并且......在两个fase之间显示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不会为转换设置动画。