Override fill-animation mode: forward in JavaScript / CSS

Question

I have text in which I am animating, and I am doing this using CSS keyframes. I keep the appearance of the final result of the animation, so I use anim-fill-mode: transitions to do this, for example:

#my-text { opacity: 0; } .show-me { animation-name: show-me; animation-duration: 2s; animation-fill-mode: forwards } @keyframes show-me { 100% { opacity: 1; } } 

Then I add the show-me class to the element using jQuery:

 $('#my-text').addClass('show-me'); 

Later, after the animation is completed, I try to change the opacity of the element through the code, but I can not do this:

 // this won't change the opacity, unfortunately $('#my-text').css('opacity', 0); 

Here is an example that shows the problem: http://jsfiddle.net/x3mbkbwL/2/

How to override the value set in the animation when using the forward fill mode? I know that I can remove a class (in this case "show-me") when I need to change the opacity of an element, but it looks like I should be able to directly override css in JavaScript and override opacity.

Answer 1

It seems that the CSS attributes set by animation-fill-mode: forwards cannot be overwritten on the same element.

Or: add parent shell around

One solution is to set a wrapper around the element with animation-fill-mode: forwards . Then, to rewrite the redirected attributes, you only need to update the parent.

 <div id="parent"> <div id="my-text">I just faded in!</div> </div> 

Then overwrite the opacity for the parent only:

 $('#parent').css('opacity', 0); 

I implemented the changes in your fiddle here: http://jsfiddle.net/x3mbkbwL/3/

Or: a wrapper nest inside

If you prefer, you can add another child element instead:

 <div id="my-text"> <span id="wrapper">I just faded in!</span> </div> 

Then "rewrite" opacity only on the nested shell:

 $('#wrapper').css('opacity', 0); 

Both approaches work best if the redirected opacity is set to 1 . If it is sent to 0 , then it obviously will not work, because the element is already hidden.