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

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