26

I've got not animated element as default. There's also a trigger that lets me turn on & off animation on that element. The animation itself is very simple: moves element from left to the right and back.

When I stop animation, then my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it just changes its position from the one when I turned off animation to initial one. My question is: is there a way to stop it smoothly, so when I turn off the animation it goes back to initial position but smoothly/animating.

Here's my element and animation: http://jsfiddle.net/2Lwftq6r/

HTML:

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

CSS:

div { 
    margin-top: 50px;
    width: 50px; height: 10px;
    background: #000;
    transform: translateX(0);
}

#anim:checked ~ div {
    -webkit-animation: dance 2s infinite ease-in-out;
    -moz-animation: dance 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); }
  50% { -moz-transform: translateX(300px); }
}
3
  • Unfortunately, the current CSS specs do not 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), but they are all JS-based. Would you consider a JS-based solution?
    – Terry
    May 9, 2015 at 21:03
  • possible duplicate of Smoothly stop CSS keyframe animation
    – brenjt
    May 9, 2015 at 21:16
  • Has this been solved?
    – Rami Awar
    Feb 23, 2021 at 9:45

4 Answers 4

14

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{
    animation-direction:alternate;
    transform: translate(1.2cm,1cm);
    transition: all 1.5s;
    -webkit-transition: all 1.5s;

}

#Spatula{
    -webkit-transition: all 1.5s;
    transition: all 1.5s;

}

Good luck!

4
  • 1
    This is the simplest solution I've seen and it worked for me :)
    – MrAn3
    Jan 4, 2019 at 19:28
  • 1
    animation-direction:alternate; is not needed I guess
    – tomexx
    Jan 24, 2021 at 13:33
  • Good answer, but unfortunately it applies to everything, including if the target element is on a modal and the modal is closed. The element takes 1.5s to disappear... Oct 14, 2022 at 12:43
  • this is not very useful if the animation is running more than once, you cannot mimic that with transitions Oct 20, 2022 at 8:01
4

You can't archive this effect only CSS3 way, but if you really need it, you could use jQuery + CSS3 Transitions. My solution (http://jsfiddle.net/sergdenisov/3jouzkxr/10/):

HTML:

<input type="checkbox" id="anim-input">
<label for="anim-input">Start / stop animation</label>
<div class="anim-div"></div>

CSS:

.anim-div { 
    margin-top: 50px;
    width: 50px;
    height: 10px;
    background: #000;
}

    .anim-div_active {
        -webkit-animation: moving 2s ease-in-out infinite alternate;
        animation: moving 2s ease-in-out infinite alternate;
    }

    .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('change', function() {
    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 list from http://caniuse.com.

0
2

There is also an alternate solution, it might not give you the desired effect of going back to it's original state, but since nobody mentioned it and this problem seems to have no solution, it's possible to pause the animation purely in css, locking it's state until it's started again

To pause the animation you need first to make the animation available even when the checkbox is not checked

And make use of the animation-play-state property

div { 
    margin-top: 50px;
    width: 50px; height: 10px;
    background: #000;
    animation: dance 2s infinite ease-in-out paused;
}

#anim:checked ~ div {
    animation-play-state: running;
}

@keyframes dance {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(300px); }
}
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
    
<div></div>

1
  • This is such a smart solution and works perfectly. It's not reverting the animation but definitely prevents the jump when not hovering the element anymore.
    – Manuel
    Jul 14, 2021 at 15:34
1

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 make this work you would need to replicate a lot of your CSS in your Javascript which kind of destroys the point (Like for example in this closely related answer Change speed of animation CSS3?). To really make it stop smoothly your best bet would be to write the animation on a platform like the Greensock animation library which provides all the tools you need to make it actually smoothly stop instead of suddenly stop.

There's also another answer below it that does make an effort at using CSS, you can look at that one.

1
  • 1
    On a related note, this is something that is being added to the angular animateCss service. May 11, 2015 at 20:13

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.