Webkit CSS Animation issue - persisting the end state of the animation? [duplicate] - css

Question

This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 7 years ago.
Given the following CSS3 animation....
<style type="text/css" media="screen">
.drop_box {
-webkit-animation-name: drop;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes drop {
from {
-webkit-transform: translateY(0px);
}
to {
-webkit-transform: translateY(100px);
}
}
</style>
<div class="drop_box">
Hello world
</div>
The Hello World text animates as expected dropping down 100px. However, at the end of the animation it jumps back to its original position.
Clearly this makes sense in CSSland. The animation has been applied and is no longer acting on the element so the original styles take effect. It seems slightly odd to me though - surely if one is animating an element into place then one would expect that placing to persist?
Is there any way of making the end position 'sticky' without having to resort to Javascript to tag a classname or style onto the element at the end of the animation to fix its altered properties? I know that transitions persist, but for the animation I have in question (the example is for demonstration purposes only) transitions don't give the level of control needed. Without this, it seems that complex animations are only of use for circular processes where the element ends up back in its original state.

Answer 1

You can use -webkit-animation-fill-mode to persist the end state (or even extend the start state backwards). It was added to WebKit a while ago, and shipped in iOS 4 and Safari 5.
-webkit-animation-fill-mode: forwards;

Answer 2

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.

Answer 3

Just to add to the great answers here, you could use a javascript framework such as jQuery Transit that handles the CSS3 transitions for you.
Depending on how many transitions/effects you will be doing, this may be a better solution in keeping your code clean rather than keeping up with a large CSS file that has all of your effects in it.
This is a very simple one-liner that accomplishes what you want:
Javascript:
$(".drop_box").transition({y: "+=100px"}, 2000);
JS Fiddle Demo

Answer 4

I think what you might be looking for is:
0% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(100px);
}
This should leave it in the right place.

Answer 5

Yet another way to do this, just for kicks,
<style type="text/css" media="screen">
.drop_box {
position:absolute;
top:100px;
-webkit-animation-name: drop;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes drop {
from {
-webkit-transform: translateY(-100px);
}
to {
-webkit-transform: translateY(0px);
}
}
</style>
<div class="drop_box">
Hello world
</div>