html - CSS3 : Transition of background color to transparent

Question

我想在 div 中进行转换:

• 开始于 background-color:rgba(242, 245, 169, 1);

  ... 3 秒后...

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

并且...在两个阶段之间显示 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);}
}