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 Demo