CODEWITHSUNDEEP
jquerycsscss-animations
user1951962
user1951962

Reputation: 125

CSS keyframe animation using current background colour

I want to animate the background colour of the body tag from its current colour to a specified colour. 

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

So X above would be whatever it currently is. The background colour equivalent of CSS currentColor would be ideal (the background colour is already animating and the animation above is trigger by another event).

I have JQuery included in my project if that helps.

Cheers. Thomas.

Upvotes: 0

Views: 2246

Answers (1)

Diego N.
Diego N.

Reputation: 632

I think the best option is to use two layers, first whith background-color X and second with the animation, but using also opacity:

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

Upvotes: 1

Related Questions