Webkit CSS Animation Issue - Persisting the End State of the Animation

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.

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 can I let my css3 animation to stay at its animated position when it finishes animating?

You're looking for

-webkit-animation-fill-mode: forwards;

DEMO

set state after animation CSS3

Use animation-fill-mode with a value of forwards:

If the value for 'animation-fill-mode' is 'forwards', then the animation will apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed. The last executing keyframe is the ‘to’ or ‘100%’ keyframe, unless the animation has 'animation-direction' set to 'alternate' and both a finite and even iteration count, in which case it is the ‘from’ or ‘0%’ keyframe.

Example: http://jsfiddle.net/FvxVc/2/

XML SVG - persist the end state of an animation

fill="freeze" will persist the state of an animation e.g.

<svg width="200" height="200" viewBox="0 0 100 100"     xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink">  <rect id="outline" stroke="black" fill="white"         width="100" height="100" >    <animateTransform id="one"                      attributeType="XML"                      attributeName="transform"                      type="translate"                      from="0" to="-7"                      dur="1s" repeatCount="1"                      fill="freeze"/>  </rect></svg>

CSS Animation property stays after animating

I think you're looking for animation-fill-mode CSS3 property

https://developer.mozilla.org/en/CSS/animation-fill-mode

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

for your purpose just try to set

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Setting forwards value «the target will retain the computed values set by the last keyframe encountered during execution»

CSS3 animation (webkit keyframes) issue

Here you go, check the DEMO

#badBox1{ 
    max-height: 21%;
    max-width: 21%;
    position: absolute;
    top: 48%;
    left: -8%;
    -webkit-animation-name:badBox1Moving;
    -webkit-animation-duration: 8s;
    -webkit-animation-delay: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes badBox1Moving{
    0%   { left:-10%;}
    75% { left:70%;}
    85% { left:80%;top:48%; }
    90% { left:82%;top:65%; }
    95% { left:82%;top:65%;}
    100% { left:82%;top:65%;}
}

Don't give 'margin-top' in keyframes if you haven't defined it in its parent CSS.
Like in '#badBox1' CSS you defined 'top: 48%;' then you should further work upon the same value so that the 'top: 48%;' in order to move vertically down changes to 'top: 65%';

And you can define as many keyframe percentages as you want and also keep changing the animation duration accordingly to adjust them. Percentages refer to where you want the change(animation) to take place for a particular element.

webkit translateX animation is rolling back to initial position

Do not use webkit animation for this as it comes back to the default values once played.
Instead define

.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%);
}

and using Javascript, either set -webkit-transform: translateX(100%); or add a CSS class to your element which set the final transform value and webkit will animate it properly

Webkit CSS Animation Issue - Persisting the End State of the Animation