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

Answer 1

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 2

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 3

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 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>