CSS背景颜色关键帧动画

2014-06-23 202 views 2 likes

我试图在firefox（主题）中为工具栏背景颜色设置一个简单的淡入淡出效果。问题是，我的颜色完全变得透明。我宁愿我的颜色在一半的时候褪色，然后开始恢复到全彩色。CSS背景颜色关键帧动画

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

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;} 
}

我已经试过，没有运气透明度设置摆弄周围。任何帮助表示赞赏。

来源

2014-06-23 user1774640

请解释一下你想实现更多的细节是什么...... –

我想一个背景颜色由鲜红色渐变到淡红色再回到，没有颜色淡出到透明。 – user1774640

回答

@-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

来源

2014-06-23 10:18:16

谢谢！这是按需要工作的。 – user1774640

CSS背景颜色关键帧动画

回答

相关问题