How can i make the final state of an animation persist?

Question

I animate the width of an div from 0 to 100%, and after the animation is done i want the final result to persist. Here is what i have until now:

   <style>
    #element {
        background: yellow; 
        bottom:0; 
        height:70px;
        animation:myfirst 5s;
        -moz-animation:myfirst 5s; /* Firefox */
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
        -o-animation:myfirst 5s;}
    @keyframes myfirst {
        from {width:0px;}
        to {width:100%;}
    }

    @-moz-keyframes myfirst /* Firefox */ {
        from {width:0px;}
        to {width:100%;}
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */ {
        from {width:0px;}
        to {width:100%;}
    }

    @-o-keyframes myfirst /* Opera */ {
        from {width:0px;}
        to {width:100%;}
    }

Is there a CSS way or JS to do that?

Answer 1

Use the forwards or both properties:

-webkit-animation:myfirst 5s forwards;

Then the animation will stop at 100% and persist.