当前位置: 动力学知识库 > 问答 > 编程问答 >

firefox - CSS background color keyframes animation

问题描述:

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: