How To Not Make A Css Animation Revert Back

How to smoothly revert CSS animation to its current country??

I've got non blithe element equally default. There'due south also a trigger that lets me turn on & off blitheness on that element. The animation itself is very simple: moves element from left to the correct and back.

When I stop blitheness, so my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it but changes its position from the one when I turned off animation to initial ane. My question is: is there a way to stop information technology smoothly, so when I plow off the blitheness it goes dorsum to initial position simply smoothly/animative.

Hither's my element and blitheness: http://jsfiddle.net/2Lwftq6r/

HTML:

              <input type="checkbox" id="anim"> <label for="anim">Offset / stop animation</characterization> <div></div>

CSS:

              div { margin-top: 50px; width: 50px; superlative: 10px; background: #000; transform: translateX(0); } #anim:checked ~ div { -webkit-animation: trip the light fantastic toe 2s infinite ease-in-out; -moz-animation: trip the light fantastic 2s infinite ease-in-out; } @-webkit-keyframes dance { 0%, 100% { -webkit-transform: translateX(0); } 50% { -webkit-transform: translateX(300px); } } @-moz-keyframes dance { 0%, 100% { -moz-transform: translateX(0); } l% { -moz-transform: translateX(300px); } }

avatar

Comments :

Unfortunately, the electric current CSS specs do non make provision for this behavior. There are a few workarounds for this issue (the lack of transitioning back to "ground state" after stopping/removing the animation), merely they are all JS-based. Would you consider a JS-based solution? - Terry

Has this been solved? - Rami Awar

The Answers

I just had the same problem and I solved it by not using animation and it works perfectly! Check out my solution: So I had this spatula that I had to move when hovered over only, and I wanted it to transition back smoothly, so this is what I did:

              #Spatula:hover{ blitheness-management:alternating; transform: interpret(ane.2cm,1cm); transition: all i.5s; -webkit-transition: all i.5s; } #Spatula{ -webkit-transition: all ane.5s; transition: all 1.5s; }

Skilful luck!

avatar

Comments :

This is the simplest solution I've seen and it worked for me :) - MrAn3

animation-direction:alternate; is non needed I gauge - tomexx

You lot tin can't archive this issue just CSS3 style, but if you actually need information technology, yous could employ jQuery + CSS3 Transitions. My solution (http://jsfiddle.net/sergdenisov/3jouzkxr/ten/):

HTML:

              <input blazon="checkbox" id="anim-input"> <label for="anim-input">Kickoff / stop blitheness</label> <div form="anim-div"></div>

CSS:

              .anim-div { margin-height: 50px; width: 50px; tiptop: 10px; background: #000; } .anim-div_active { -webkit-blitheness: moving 2s ease-in-out infinite alternate; animation: moving 2s ease-in-out space alternating; } .anim-div_return { -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; } @-webkit-keyframes moving { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(300px); } } @keyframes moving { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } }

Javascript:

              $('#anim-input').on('alter', part() { var $animDiv = $('.anim-div'); if (this.checked) { $animDiv.removeClass('anim-div_return') .addClass('anim-div_active'); return; } var transformValue = $animDiv.css('webkitTransform') || $animDiv.css('transform'); $animDiv.css({'webkitTransform': transformValue, 'transform': transformValue}) .removeClass('anim-div_active'); requestAnimationFrame(function() { $animDiv.addClass('anim-div_return') .css({'webkitTransform': 'translateX(0)', 'transform': 'translateX(0)'}); }); });

P.S.Vendor prefixes are based on actual browsers listing from http://caniuse.com.

avatar

Bank check out This StackOverflow question.

You aren't going to like this answer, but reality is that CSS3 animations aren't really useful to achieve this. To brand this work you would need to replicate a lot of your CSS in your Javascript which kind of destroys the bespeak (Like for case in this closely related answer Change speed of animation CSS3?). To really brand information technology cease smoothly your best bet would be to write the animation on a platform similar the Greensock blitheness library which provides all the tools you need to make it actually smoothly stop instead of suddenly terminate.

There's also some other answer below it that does brand an endeavour at using CSS, you can await at that 1.

avatar

Comments :

On a related note, this is something that is existence added to the angular animateCss service. - Rorschach120

At that place is as well an alternate solution, it might not give y'all the desired effect of going dorsum to it's original state, but since nobody mentioned it and this problem seems to have no solution, it'southward possible to pause the blitheness purely in css, locking it's state until information technology'southward started again

To pause the animation y'all need first to make the animation bachelor even when the checkbox is non checked

And make use of the blitheness-play-land property

                div { margin-top: 50px; width: 50px; height: 10px; groundwork: #000; animation: trip the light fantastic toe 2s space ease-in-out paused; } #anim:checked ~ div { blitheness-play-state: running; } @keyframes trip the light fantastic { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(300px); } }

                <input type="checkbox" id="anim"> <label for="anim">Start / stop blitheness</label> <div></div>

avatar

Comments :

This is such a smart solution and works perfectly. Information technology's not reverting the animation but definitely prevents the jump when not hovering the element anymore. - Manuel

Source: https://idqna.com/question/how-to-smoothly-revert-css-animation-to-its-current-state

Posted by: hambybuir1998.blogspot.com