0

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はありますか？

4

1 に答える 1

4

forwardsまたはbothプロパティを使用します。

-webkit-animation:myfirst 5s forwards;

その後、アニメーションは 100% で停止し、持続します。

于 2012-12-21T09:52:31.583 に答える