Answered Animate background-color to x transparent with Variable

[SpongeBOB]

Hi everyone,

I have an HTML element (fieldset) that I would look to animate the background-color transparency, from solid to 0.75 of transparency

If there will be a way just to change the alpha channel that would be great.. but here what I've done so far.

The background color of this fieldset come from an external .css with a variable name var(--exTheColor)

The declaration of that variable in the .css file

--exTheColor:rgb(40,40,40);

in my html page I have tried


<style>

@keyframes TransBG {
   form {background-color: rgba(var(--exTheColor), 1);}
   to {background-color: rgba(var(--exTheColor), 0.7);}
}
.TBG {
   animation-name: TransBG;
   animation-duration: 1s;
   animation-timing-function: ease-out;
   animation-delay: 1.5s; 
}

</style>

<fieldset class="TBG" style="background-color: var(--exTheColor)"></fieldset>

--

The resulting animation go from full solid to full transparent ! any idea ?

 

[SpongeBOB]

I've found ! I was needed to declare the variable not as a rgb but directly put the raw serie

 --exTheColor:40,40,40;