Question

我想将body标签的背景颜色从其当前颜色设置为指定颜色。

@-webkit-keyframes aboutColour /*--for webkit--*/{
    0%   {background-color: X;}
    100% {background-color: red;}
}

所以上面的X就是现在的样子。相当于CSS currentColor的背景颜色是理想的（背景颜色已经是动画，上面的动画是由另一个事件触发的。）

如果有帮助的话，我的项目中包含了JQuery。

干杯。托马斯。

Answer 1

我认为最好的选择是使用两个图层，第一个是背景颜色X，第二个是动画，但也使用不透明度：

HTML：

<div class="bg">
    <div class="foo"></div> // Animate this div
</div>

CSS：

.bg { position:relative; background-color: X }
.foo { width:100%; height:100%; -webkit-animation: aboutColor [...] ;} 

@-webkit-keyframes aboutColour /*--for webkit--*/{
    0%   {background-color: transparent; opacity: 0}
    100% {background-color: red; opacity: 1}
}

使用当前背景颜色的CSS关键帧动画

1 个答案: