CSS背景色关键帧动画

Question

我正在尝试为firefox(主题)中的工具栏背景颜色设置一个简单的淡入/淡出动画.问题是,我的颜色完全消失到透明.我希望我的颜色在中途褪色,然后开始缓和回到全彩色.

我列出了我试过的代码......

toolbar{
    animation-name: animation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
}

@keyframes animation {
    50.0%  {background-color:red;}
}

我试图摆弄不透明度设置,没有运气.任何帮助表示赞赏.

Answer 1

@-webkit-keyframes animation {
    0%     {background-color:red;}
    50.0%  {background-color:#ff6666;} /* your chosen 'mid' color */
    100.0%  {background-color:red;}
}

@keyframes animation {
    0%     {background-color:red;}
    50.0%  {background-color:#ff6666;}
    100.0%  {background-color:red;}
}

JSfiddle演示