Geek Answers Handbook

Reusing CSS animations in the opposite direction (by resetting state?)

I used two keyframe animations in CSS. One moves from left to right, and the other uses exact values, but vice versa.

@keyframes moveLeft { from {transform: translate3d(50px, 0, 0);} to {transform: translate3d(0px, 0, 0);} } @keyframes moveRight { from {transform: translate3d(0px, 0, 0);} to {transform: translate3d(50px, 0, 0);} }

However, it is interesting whether only one keyframe animation can be used. but as soon as I add animation-direction: reverse , the animation only plays once. He probably saves the information he used before. So: can I reset this information somehow? Or is it possible to use one animation twice in different directions? (without using JS)

http://jsfiddle.net/vrhfd66x/

+6
source share
1 answer

No, there is no way to restart the animation using only CSS. You will need to use JavaScript to remove the animation from the element, and then reapply it to the element (after a delay) so that it restarts.

The following is an example of the W3C CSS3 Animation Spec (in a different context, but the point should be done well for this case):

Please also note that changing the “animation name” value does not necessarily restart the animation (for example, if the list of animations is applied and one of them is removed from the list, only this animation stops, the rest of the animations will continue). To restart the animation, you must delete it and then reapply.

my accent

This CSS Tricks Article by Chris Coiyer also points out the same and provides some JS solutions for restarting animations. ( Note: The article provides a link to Oli dabblet, which claims that changing properties, such as duration, number of iterations, forces it to restart on Webkit, but seems to be deprecated since they no longer work in Chrome).

Summary:

While you have already touched on the following, I am going to repeat the iteration for completeness:

  • When an animation is applied to an element, it remains on the element until it is deleted.
  • UA keeps track of the animation in the element and whether it is complete.
  • When you apply the same animation to :checked (albeit in a different direction), UA does nothing, since the animation already exists in the element.
  • Switching positions (instantaneous) when clicking on the flag is due to transform , which is used in the :checked selector. The presence of animation does not matter.

Solutions:

As you can see from the snippet below, achieving this with one animation is quite difficult even when using JavaScript.

 var input = document.getElementsByClassName("my-checkbox")[0]; input.addEventListener('click', function() { if (this.checked) { this.classList.remove('my-checkbox'); window.setTimeout(function() { input.classList.add('anim'); input.classList.add('checked'); }, 10); } else { this.classList.remove('anim'); window.setTimeout(function() { input.classList.remove('checked'); input.classList.add('my-checkbox'); }, 10); } }); 
 input { transform: translate3d(50px, 0, 0); } .my-checkbox { animation: moveLeft 1s; animation-direction: reverse; } .checked { transform: translate3d(0px, 0, 0); } .anim{ animation: moveLeft 1s; } @keyframes moveLeft { from { transform: translate3d(50px, 0, 0); } to { transform: translate3d(0px, 0, 0); } } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <input type="checkbox" class="my-checkbox">

So the best option (if you want to stick with CSS animations) is to use two different animations .

Alternatively, you can also take a look at Marcelo's comment. If the actual use case is exactly what is provided in the script, then transition enough and animation not required. Transitions can work in both forward and reverse directions in nature and therefore will be safer.

+2
source

More articles:


All Articles