Stop Infinite CSS3 Animation and Smoothly Revert to Initial State

Stop infinite CSS3 animation and smoothly revert to initial state

Found a pretty simple workaround. Still not pure CSS, it involves a bit of JS, but it works well.

Updated fiddle: https://jsfiddle.net/cazacuvlad/qjmhm4ma/2/

What I did was to move the loader-active class to each span (instead of the wrapper), listen to the animationiteration event on each span and stop the animation then.

$('.loader-wrapper span').on('animationiteration webkitAnimationIteration', function () {
  var $this = $(this);

  $this.removeClass('loader-active');

  $this.off();
});

This basically stops the animation at the very end of an iteration cycle.

Updated LESS

.loader-wrapper {
  span {
    &.loader-active {
      .animation-name(loader);
      .animation-duration(1200ms);
      .animation-timing-function(ease-in-out);
      .animation-play-state(running);
      .animation-iteration-count(infinite);

      &:nth-child(1) {
      }
      &:nth-child(2) {
        .animation-delay(300ms);
      }
      &:nth-child(3) {
        .animation-delay(600ms);
      }
      &:nth-child(4) {
        .animation-delay(900ms);
      }
    }
  }
}

css3 animation keep reverting to original state

You need to add the rule -webkit-animation-fill-mode: forwards; to your animations.

Also, regarding the text animation: Animate the visibility property instead of display property

FIDDLE

.expanding-spinning {
  -webkit-animation: spin2 1.4s ease-in-out;
  -moz-animation: spin2 1.4s linear normal;
  -o-animation: spin2 1.4s linear;
  -ms-animation: spin2 1.4s linear;
  animation: spin2 1.4s ease-in-out alternate;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
    -webkit-animation-fill-mode: forwards; /* <--- */
}
@-webkit-keyframes fadeInFromNone {
    0% {
        visibility:hidden; 
        opacity: 0;
    }

    100% {
        visibility: visible; 
        opacity: 1;
    }
}

.slogan {
    visibility:hidden;
    opacity: 1;
    -webkit-animation-duration: 2s;
    -webkit-animation-name: fadeInFromNone;
    -webkit-animation-delay: 3.4s;
    -webkit-animation-fill-mode: forwards; /* <--- */
}

See this article for a nice explanation of all the animation properties

The fill mode. If set to forwards, the last keyframe remains at the
end of the animation,

(from above link)

How to stop initial animation from running after hover state animation is done?

Whilst doing more experiments on this I found out the following:

Using transition instead of animation will actually hold the state of the final frame in place until the mouse leaves the element and then it will actually transition back to its original state. This is the behavior that I needed.

It seems to be that transition was actually a better and simpler use for this behavior.

I'm trying to correct the animation duration and timeline of infinite flip, rotation, spin and disappearance of three images in pure CSS

I'm not sure I understand your image since it says the second image should disappear but it also says the animation is infinite. I hope it's working as you intended, if not just leave a comment on what needs to be fixed.

I'm using the animationend event to control the animations.

var counter = 1;var div = document.querySelector('.flipping-images');var images = document.querySelectorAll('.flipping-images img');
var showNext = function () {  counter++;  if (counter > 3) counter = 1;  div.classList.remove('image1', 'image2', 'image3')  div.classList.add('image'+counter);};
for (var img of images) {  img.addEventListener('animationend', showNext);  img.addEventListener('click', showNext);}
document.querySelector('#next').addEventListener('click', showNext);

.flipping-images {  perspective: 300px;}.flipping-images img {  display: none;  animation: rotate 5s linear 1;}.flipping-images.image1 img:nth-child(1),.flipping-images.image2 img:nth-child(2),.flipping-images.image3 img:nth-child(3) {  display: block;}.flipping-images.image2 img:nth-child(2) {  animation: rotate 5s linear infinite;}@keyframes rotate {  0% { transform: rotateY(-45deg); }  100% { transform: rotateY(45deg); }}button {  margin: 1em;}

<div class="flipping-images image1">  <img src="https://via.placeholder.com/100x100/fdc34f/FEFEFE?text=1">  <img src="https://via.placeholder.com/100x100/3e72ff/FEFEFE?text=2">  <img src="https://via.placeholder.com/100x100/222222/FEFEFE?text=3"></div>
<button id="next">Next</button>

Smoothly stop CSS keyframe animation

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.

Finish infinite iterations cycle and stop the animation with CSS

1. You had a problem with the name of your keyframe name - spinnerAnimation vs preloaderAnimation
2. The only way I was able to set IE to stop the animation was to set animation: none; inside the .stop class:

$("button").click(function() {  $(".spinner").addClass("stop");})

.spinner {  width: 30px; height: 30px;  background: green;  animation: spinnerAnimation 2s linear infinite;}
.spinner.stop {  -webkit-animation-iteration-count: 1;  animation: none;}
button {  margin-top: 20px;}@-webkit-keyframes spinnerAnimation {  0% {    -webkit-transform: rotate(0);  }  100% {    -webkit-transform: rotate(360deg);  }}
@keyframes spinnerAnimation {  0% {    transform: rotate(0);  }  100% {    transform: rotate(360deg);  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="spinner"></div><button>Stop spinner</button>

CSS3 Animation Rotate, removing animate property makes the animation revert back to its origin position

Removing the animation from css, or putting it to "none", will revert to the initial state.
You could just pause it using:

document.getElementsByClassName('bottomSmallCogStopAnimating')[0].webkitAnimationPlayState = 'paused'

Or add a class name:

.stopAnimating {
-webkit-animation-play-state: paused;
}

I am not really sure what you are trying to do.

---

Related Topics