CSS3：背景颜色过渡为透明

我想做一个过渡div that:

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

  ...三秒后...

• 以。。结束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);...

如同这个解决方案 https://stackoverflow.com/a/18353355/4467741, but 没有 ':hover'。直接地。

我怎么才能得到它？

谢谢。

http://jsfiddle.net/BramVanroy/hakomq5L/ 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);}
}