Css3 Animation Keep Reverting to Original State

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)

CSS animation reverts to original state

Just add

animation-fill-mode: forwards;

which is the standard syntax for the webkit prefixed version you are using.

http://jsfiddle.net/d2d46zf8/7/

CSS3 Animate: How to have the object not revert to its initial position after animation has run?

Oh, that's easy, simply set all the css rules to the finishing result.
Example

Maintaining the final state at end of a CSS3 animation

Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

How to prevent css3 animation reset when finished?

Add animation-fill-mode: forwards;

to your .go

The animation’s final keyframe continues to apply after the final iteration of the animation completes.

http://css-infos.net/property/-webkit-animation-fill-mode

How to prevent a CSS animation from going back to its original position?

You need to use animation-fill-mode with a value set to forwards

From Mozilla Developer Network:

The target will retain the computed values set by the last keyframe
encountered during execution. The last keyframe encountered depends on
the value of animation-direction and animation-iteration-count

Demo

Reuse CSS animation in reversed direction (by resetting the state?)

No, there is no way to restart the animation using CSS alone. You'd have to use JavaScript to remove the animation from the element and then re-apply it to the element (after a delay) for it to restart.

The below is what the W3C's CSS3 Animation Spec says (in a different context, but the point should hold good for this case also):

Note also that changing the value of ‘animation-name’ does not necessarily restart an animation (e.g., if a list of animations are applied and one is removed from the list, only that animation will stop; The other animations will continue). In order to restart an animation, it must be removed then reapplied.

^{emphasis is mine}

This CSS Tricks Article by Chris Coiyer also indicates the same and provides some JS solutions for restarting an animation. (Note: The article has a reference to Oli's dabblet which claims that altering properties like duration, iteration count makes it restart on Webkit but it seems to be outdated as they no longer work on Chrome).

---

Summary:

While you have already touched upon the following, I am going to re-iterate for completeness sake:

• Once an animation is applied on the element, it remains on the element until it is removed.
• UA does keep track of the animation being on the element and whether it has completed or not.
• When you apply the same animation on :checked (albeit with a different direction), the UA does nothing because the animation already exists on the element.
• The switch of positions (instantaneous) while clicking the checkbox is because of the transform that is applied within the :checked selector. The animation's presence makes no difference.

---

Solutions:

As you can see from the below snippet, achieving this with a single animation is pretty complex 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">

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);
      }
    }
  }
}

Webkit CSS Animation issue - persisting the end state of the animation?

If you define the end state in the class then it should do what you want in the example:

.drop_box {
    -webkit-transform: translateY(100px);
    -webkit-animation-name: drop;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
}

But if your animation is event driven anyway you will probably end up having to use a bit of JavaScript. The easiest way is to make the adding of the class with the end state in it be what triggers the animation to start.

--edit

See dino's answer for information on the animation-fill-mode property added in the April 2012 WD.

---

Related Topics