Webkit CSS Animation issue - persisting the end state of the animation? [duplicate]
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;
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.
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);