How to make a CSS animation stop in the last state?

Question

I have a div, which is lively, and would not like that at the end of the animation she turns to the state of when she started, because she ends up returning to the original state at the end of the animation.

#div1 {
    height:100px;
    width:100px;
    background-color:silver;
    position:relative;
    animation-name:animacao;
    animation-duration:3s;
    animation-iteration-count:1;
    animation-delay:0.5s;
}
@keyframes animacao {
    from {
        left:0px
    }
    to {
        left:100px
    }
}

<div id="div1"></div>

jsfiddle: http://jsfiddle.net/fauqk0e5/

Answer 1

There is an experimental property called animation-fill-mode which defines "how a CSS animation should apply the styles to the target before and after its execution". The value forwards determines that the element retains the styles of the last keyframe of animation.

Applying this, with the prefix -webkit for all properties, your CSS would look like this:

#div1 {
    height:100px;
    width:100px;
    background-color:silver;
    position:relative;
    -webkit-animation-name:animacao;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-delay:0.5s;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animacao {
    from {
        left:0px
    }
    to {
        left:100px
    }
}

^{http://jsfiddle.net/dp3ywmw9/}

But note: the code with this prefix will only work in browsers that accept this prefix. It is recommended to include all prefixes in addition to an unfortified version (or use some JS to do this for you).

Answer 2

You can add the property -webkit-animation-fill-mode: forwards; not to return to initial position:

#div1 {
    height:100px;
    width:100px;
    background-color:silver;
    position:relative;
    -webkit-animation-name:animacao;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-delay:0.5s;
    -webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes animacao {
    from {
        left:0px
    }
    to {
        left:100px
    }
}