Maintaining the Final State At End of a Css3 Animation

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;

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.

Preserve the last keyframe property in CSS animations

You have not added animation-fill-mode: forwards to preserve the final state of the animation.

Since there are no default properties set for opacity in your CSS rules and the animation-fill-mode by default is none, the element takes the default opacity value of 1 after the animation is finished.

JSfiddle Demo

div {  animation: fadein 2s;  color: black;  font-size: 70px;  animation-fill-mode: forwards;}@keyframes fadein {  from {    opacity: 0;  }  to {    opacity: 0.1;  }}

<div>Rain.js</div>

CSS3 animation stay at end state for 3 seconds

Sure. You'll have to do some math, though, because keyframe stops are measured in percentage of total animation. Let's say your total animation should last 12 seconds -- that means your animation should be unmoving for the last 25% of the total animation time. I'll modify an example from W3schools to demonstrate this.

div.animated {
    -webkit-animation: with_delay 12s linear 0s infinite; /* Chrome, Safari, Opera */
    animation: with_delay 12s linear 0s infinite; /* Standard syntax */
}

/* Chrome, Safari, Opera */
@-webkit-keyframes with_delay {
    0%   {background: red;}
    75%  {background: green;}
    100% {background: green;}
}

/* Standard syntax */
@keyframes with_delay {
    0%   {background: red;}
    75%  {background: green;}
    100% {background: green;}
}

Here is a live demo.

Note that if you don't mind the delay being at the beginning of the animation instead of the end, it's even easier. Simply specify animation-delay or transition-delay depending on which animation technique you already have implemented.

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

CSS Animation: Fade Out permanently

Add animation-fill-mode: forwards; to your element, and the animation will remain at the end.

Maintaining the Final State At End of a Css3 Animation