CSS背景颜色关键帧动画 [英] CSS background color keyframes animation

问题描述

我试图为firefox（主题）中的工具栏背景颜色设置一个简单的淡入淡出效果。问题是，我的颜色完全变得透明。我希望我的颜色在中途消失，然后开始恢复到全彩色状态。

I'm trying to animate a simple fade in/out for a toolbar background color in firefox (themeing). Problem is, my color fades completely out to transparent. I would prefer my color to fade about half way then start easing back to full color.

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

I listed the code I've tried...

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

我已经尝试过用不透明度设置来操作，没有运气。

I've tried fiddling around with opacity settings with no luck. Any help is appreciated.

推荐答案

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

这篇关于CSS背景颜色关键帧动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！