How to Prevent CSS3 Animation Reset When Finished

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 CSS animation resetting after each cycle

The dot moves back to the original position (0%) because the last keyframe was at 180deg. To make it so that it completes the whole circle, you will have to end at 360deg. So it is still resetting, but since 360deg and 0deg are technically the same position, you will not see this "transition".

@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  25% {

    transform: rotate(180deg);

  }

  50% {

    transform: rotate(180deg);

  }

  75% {

    transform: rotate(360deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

.spinning {

  position: absolute;

  height: 50px;

  width: 50px;

  top: 100px;

  left: 100px;

  background-color: lightgrey;

  border-radius: 50%;

  animation: spin 4s linear infinite forwards;

}

.spinning::after {

  content: '';

  position: absolute;

  height: 10px;

  width: 10px;

  border-radius: 50%;

  background-color: red;

  top: -5px;

  left: 20px;

}

<div class="spinning"></div>

How to prevent CSS animation restart after transition?

I used CSS Variables with fallback.

var(--use-this-variable-if-exist, use this fallback if no variable);

Initially there is no --left value, so it uses fallbacks. When hover, set --left value as -27px. Thus, the keyframes are also updated.

.insite-draggable {

  z-index: 10;

  position: fixed;

  left: 45px;

  bottom: 12px;

}

.insite-handle {

  position: absolute;

  left: -14px;

  bottom: 13px;

  transition: left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);

  animation: bounce 2s;

  animation-iteration-count: 2;

  animation-delay: 2s;

}

.insite-handle:before {

  content: "\f100";

  font-family: "Font Awesome 5 Free";

  font-style: normal;

  font-size: 16px;

  line-height: 16px;

  display: inline-block;

  background-color: #1ea2b1;

  cursor: move;

  color: #ffffff;

  height: 16px;

  width: 26px;

  padding: 3px 3px 3px 4px;

  border-radius: 7px 0px 0px 7px;

  border: 1px solid #1a8e9b;

  transition: padding-left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);

}

.insite-handle:hover {

  left: -27px;

  --left: -27px;

  &:before {

    content: "\f0b2";

    padding-left: 5px;

  }

}

@keyframes bounce {

  0% {

    left: var(--left, -14px);

  }

  10% {

    left: var(--left, -20px);

  }

  20% {

    left: var(--left, -14px);

  }

  30% {

    left: var(--left, -20px);

  }

  40% {

    left: var(--left, -14px);

  }

  100% {

    left: var(--left, -14px);

  }

}

.insite-btn {

  display: block;

  position: relative;

  top: auto;

  left: auto;

  bottom: auto;

  right: auto;

  font-family: 'BrixSansBold';

  font-style: italic;

  font-size: 0.875rem;

  line-height: 1rem;

  -ms-border-radius: 5px;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  -moz-background-clip: padding;

  -webkit-background-clip: padding-box;

  background-clip: padding-box;

  color: #b00402;

  border: none;

  margin: 10px 10px 10px auto;

  padding: 7px 10px 7px 34px;

  text-decoration: none;

  text-transform: none;

  box-shadow: #333333 1px 1px 10px;

  background-color: #e3e000;

}

<span class="insite-draggable">

 <i class="insite-handle"></i>

  <a class="insite-btn" href="#">Turn on</a>

</span>

How to prevent animation reset after a rotation?

I found the problem. For some reason the rotation animation resets if the element is inline. By displaying the span as a block or inline-block the animation does not reset after the rotation.

JSFiddle demonstrating the answer.

Maintaining the final state at end of a CSS3 animation

Try adding animation-fill-mode: forwards;. For example like this:

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

How to prevent a CSS animation from rerunning after a second hover animation

• The animation-* properties (like animation:, animation-name:, animation-duration:, etc) are multi-valued properties, just like background-image.

• When the effective value of a multi-value property for an element changes (e.g. setting an entirely new background-image: or animation: when an element already has a multiple values for that property) then CSS will replace the entire list of values.

• So if one rule sets animation-name: foo; and another (temporarily applied) rule sets animation-name: bar; then that counts as removing foo and adding bar, rather than simply adding bar to the existing list of animations.

• And CSS animations (by default) start when they are added, and cannot be controlled after they have been removed.

• So in your case, the test1 animation restarts because your :hover rule removes the test1 animation from img's animation-list (and adds test2), and then when the :hover state is left the test1 animation is re-added, which makes it restart the test1 animation again.

The fix is to not remove the test1 animation from the :hover state, like so:

    img {
        animation-name: test1;
        animation-duration: 4s;
    }
    img:hover {
        animation-name: test1, test2;
        animation-duration: 4s, 4s;
    }

---

Demo:

• I've renamed test1 to onLoad and test2 to onHover and sped-up the animations to 1-2s (from 4s) for clarity.
• The image will rotate on-load, and will increase in size on hover.
• Notice that after you stop hovering the image, it won't rotate again.

img {
    height: 40px;
    width: auto;
    position: absolute;

    animation-name: onLoad;
    animation-duration: 1s;
}
img:hover {
    animation-name: onLoad, onHover;
    animation-duration: 1s, 2s;
}
@keyframes onLoad {
    from { transform: rotate(0deg); }
    to   { transform: rotate(179deg); }
}
@keyframes onHover {
    from { height: 40px; width: 40px; }
    to   { height: 80px; height: 80px; }
}

<img src="https://i.stack.imgur.com/pVgz6.png" alt="Sample Image">

CSS Animation resets to first keyframe at end

Your image repeats so by frame 12 the image is entirely offset to the left and you're seeing the start of it repeated. Simply stop the animation after 11 steps:

div.sequence

{

    width: 128px;

    height: 128px;

    background: url('http://i60.tinypic.com/1otwkg.png');

}

div.sequence.animate

{

    -webkit-animation: boxopen 6s steps(11); /* 11 steps not 12 */

    -webkit-animation-fill-mode: forwards;

}

@-webkit-keyframes boxopen {

    from {background-position: 0;}

    to {background-position: -1408px;} /* stop at the left of frame 12 */

}

<div class="sequence animate"></div>

Can't stop animation at end of one cycle

The following comment worked for me. Thanks michael

"You need to add the fill-mode to freeze the animation state at the end of the animation.

-webkit-animation-fill-mode: forwards;

forwards leaves the animation in the state of the last frame

backwards leaves the animation at the start

---

Related Topics