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

使用forwards或both属性：

-webkit-animation:myfirst 5s forwards;

然后动画将以100％停止并持续。

如何才能使动画的最终状态持续存在？

1 个答案: