左から右にSVG塗りつぶしをアニメ化

私は左から右にスムーズに塗り潰したいこのSVGを持っています。 CSSを使ってどうすればいいですか？左から右にSVG塗りつぶしをアニメ化

私は行を動かすことを望んでいません、私は同じ場所にとどまっている間、スムーズに左から右に満たしたいので、私はsvgを使用しています。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="25" viewBox="0 0 324 25"> 
<g id="btn_underline"> 
<path id="V" d="M88.029,0.613 C58.722,-0.156 29.992,3.400 1.839,11.183 C-1.140,12.047 0.205,16.660 3.184,15.795 C28.262,8.781 54.014,5.321 80.438,5.321 C83.801,5.321 86.203,5.321 87.836,5.417 C96.196,5.610 105.324,6.282 115.413,7.339 C125.503,8.396 133.958,9.453 140.588,10.510 C147.218,11.471 156.346,12.912 167.781,14.834 C182.098,17.236 194.397,19.158 204.582,20.599 C223.511,23.194 240.519,24.443 255.412,24.443 C259.256,24.443 262.138,24.443 264.060,24.347 C274.726,23.962 284.623,23.001 293.655,21.368 C303.936,19.542 313.449,17.044 322.385,13.873 C323.634,13.489 324.307,12.047 323.826,10.798 C323.250,9.357 322.193,8.877 320.751,9.357 C311.815,12.624 302.495,15.026 292.790,16.660 C283.758,18.197 274.149,19.158 263.868,19.542 C246.668,20.023 227.066,18.774 205.159,15.795 C195.742,14.546 183.539,12.624 168.549,10.126 C156.635,8.108 147.506,6.667 141.069,5.706 C134.631,4.745 126.271,3.688 115.990,2.631 C105.709,1.478 96.388,0.805 88.029,0.613 z" fill="#00363B" /> 
</g> 
</svg>

http://codepen.io/anon/pen/GrQPvK

出典

2017-02-01 followthemadhat

検索を試みたことがありますか？ https://css-tricks.com/animating-svg-css/ – Justinas

SVGの作成方法は、この行をアニメーション化することがさらに複雑になります。 'fill'を使って簡単に' stroke'（厚さの 'stroke-width'）で作成できたのはなぜですか？ – Harry

はい私はちょうど、このアニメーションを可能にするためにパスが正確ではなかったことに気付きました。 – followthemadhat

あなたが実際に脳卒中プロパティとCSSでこれを行うことができます。

私は前もって申し訳ありませんが、シェイプなのでSVGを使用できません。効果を出すには、塗りつぶしのないパスが必要です。だから私は（：https://jakearchibald.com/2013/animated-line-drawing-svg/この記事から）：例えば、このSVGを取る

<svg xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98"> 
    <path 
     class="path" 
     d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" 
     stroke="#000" 
     stroke-width="4.3" 
     fill="none"> 
    </path> 
</svg>

お知らせstrokeとstroke-widthプロパティ。これはトリックの始まりです;）。次に、いくつかのCSSを追加する必要があります：

.path { 
    //we divide the line in multiple dashes (some full and other empty) 
    //these dashes have 1000px in length 
    //so there are one dash full of 1000px of length and then one dash empty of 1000px of length and so on and so forth 
    stroke-dasharray: 1000; 

    //we change the position of the dashes 
    stroke-dashoffset: 1000; 

    //now we animate the dashoffset 
    //we reduce the offset of each dash so we have the impression that the dashes are moving 
    animation: dash 5s linear forwards; 
} 

@keyframes dash { 
    to { 
     stroke-dashoffset: 0; 
    } 
}

それだけです！

詳細については、この記事もお読みください：https://css-tricks.com/svg-line-animation-works/

出典

2017-02-01 11:13:58

ありがとう、これは本当に役に立ちます – followthemadhat

あなたはようこそ。それは喜びです^^。ご質問がありましたら、お気軽にお問い合わせください。（もしあなたがアップヴォート/答えをチェックすることができれば、それは素晴らしいでしょう！） –

あなたはこの仕事ができるから。

svg { 
    left: -400px; 
    position:absolute; 
} 

@keyframes example { 
    from {left: -400px;} 
    to {left: 200px;} 
} 

@-webkit-keyframes example { 
    from {left: -400px;} 
    to {left: 200px;} 
} 

svg { 
    animation-name: example; 
    animation-duration: 4s; 
    animation-delay: 2s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
}

ccodepen：http://codepen.io/anon/pen/egVbMV

出典

2017-02-01 07:21:02

ありがとう、しかし私はラインが動くのを望んでいない、私は同じ場所にとどまっている間、スムーズに左から右に満たしたい、それが私がsvgを使用している理由です。 – followthemadhat

Ahh kk、申し訳ありませんが質問を誤解しました。しかし、私はあなたがCSSでそれをすることができるとは思わない。私はCSSでそれをやっていると考えることができる唯一の方法は、div内にsvgを配置することですその後divと同じ高さと同じ背景色#fffと同じですが、別のdivを絶対にposisitoned 999のようなインデックスです。それで、それはSVGの上に座っています。次に、CSSを使用して上部のdivの幅をアニメーション化します。また、上部のdivの右の位置を0pxに設定して、右に固定します。申し訳ありませんが、その日に飛び降りる必要がありますので、コードを思い付くことはできません。あなたは私の説明を理解してほしいと思っています。 –

私は実際に私が望むのと全く同じ方法ではありません。これはsvg自体の問題です。しかし、とにかくありがとう – followthemadhat

この

.fadeIn { 
    animation-name: fade-in-left; 
    animation-duration: 1s; 
} 

@keyframes fade-in-left { 
    0% { 
    opacity: 0; 
    transform: translate3d(-100%, 0, 0); 
    } 

    100% { 
    opacity: 1; 
    transform: none; 
    } 
}

ライブデモを試してみてください - http://codepen.io/anon/pen/MJQLgG

出典

2017-02-01 07:45:18 grinmax

@followthemadhat多分そうです。http://codepen.io/anon/pen/dNdrpz – grinmax

左から右にSVG塗りつぶしをアニメ化

答えて

関連する問題