CSS背景颜色关键帧动画 [英] CSS background color keyframes animation
本文介绍了CSS背景颜色关键帧动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图为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;}
}
这篇关于CSS背景颜色关键帧动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文