javascript - 如何使动画的最终状态持续存在？

Question

我将 div 的宽度设置为从 0 到 100% 的动画，动画完成后我希望最终结果保持不变。这是我到目前为止所拥有的：

   <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%;}
    }

有没有 CSS 方式或 JS 来做到这一点？

Answer 1

使用forwardsorboth属性：

-webkit-animation:myfirst 5s forwards;

然后动画将在 100% 处停止并持续存在。