CSS3 Animate: How to have the object not revert to its initial position after animation has run? [duplicate]

Question

I am attempting a simple transform on a shape in CSS (webkit specifically). The animation runs as expected but upon completion the div will revert to its initial state. Is there any way to have it remain in its final state?

Heres my CSS thus far:

    @-webkit-keyframes rotate-good {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(-90deg);
  }
}

@-webkit-keyframes rotate-bad {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(90deg);
  }
}

#good-arrow 
{
    -webkit-animation-name:             rotate-good; 
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
}

#bad-arrow 
{
    -webkit-animation-name:             rotate-bad; 
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;    
    -webkit-animation-delay: 2s;
}

Answer 1

A briefer way to do this is to add:

-webkit-animation-fill-mode: forwards;

which retains the final keyframe state.

Update: full cross browser

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

Answer 2

the cross-browser solution is:

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

What Madara Uchiha comments above is not always possible for one reason: Imagine instead of starting the animation right away (animation-delay:0s) you want 10 sec of delay before it starts. If so, you would see the final state of your animated element for 10 sec, and then the animation would take it to de 0 keyframe to 100 keyframe transition, but always you are seeing for 10 seconds the ending state.

Answer 3

Oh, that's easy, simply set all the css rules to the finishing result. Example