如何讓動畫SVG儘早開始「繪製自己」？

我想創建一個只有HTML & CSS看起來像ekg讀數的加載動畫。我有工作，但我希望它開始重繪越早（現在它完全消失，我想它開始繪製它完成「undrawing」如何讓動畫SVG儘早開始「繪製自己」？

<head> 

    <style> 
    body { 
    background-color: #fff; 
} 



.path { 
    animation: draw 2.2s infinite ease-in-out; 
    -webkit-animation: draw 2.2s infinite ease-in-out; 
} 


@keyframes draw { 
    from { 
    stroke-dashoffset: 1100; 
} 
    to { stroke-dashoffset: 50} 
} 

     @-webkit-keyframes draw { 
    from { 
    stroke-dashoffset: 1100; 
} 
    to { stroke-dashoffset: 50} 
} 

    </style> 
    </head> 
<div class="bg"> 
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236"> 

    <path class="path" stroke="#ca6728" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="610" fill="none" d="M0,80.9h20.6c0.5,0,1.4-0.2,1.8-0.5L38,70.1 
     c0.5-0.3,1.2-0.3,1.6,0l12.7,9.4c0.4,0.3,1.3,0.6,1.8,0.6l13.3,0c0.6,0,1.2,0.4,1.5,0.9l6.2,11.3c0.3,0.5,0.5,0.4,0.5-0.1l4.4-90.8 
     c0-0.5,0.1-0.5,0.1,0l6.9,102.1c0,0.5,0.2,0.6,0.4,0l7-22.4c0.2-0.5,0.7-1,1.3-1l16.1,0c0.5,0,1.3-0.3,1.8-0.7L129,66.4 
     c0.4-0.4,1.1-0.3,1.5,0l13.3,13.1c0.4,0.4,1.2,0.7,1.7,0.7l20.1,0,"/> 



    </svg> 
</div> 

    </html>

JS小提琴這裏之前：https://jsfiddle.net/jzvenice/4sLw9ag9/

來源

2015-03-31 Jennifer

克隆整個事情，並有兩個重疊會太奇怪？只是問，這對我來說似乎很駭人，但如果第二個啓動超時，它可能會工作。 – 2015-03-31 22:41:53

如果我嘗試過，是否會複製.path類並將其稱爲.path2並延遲啓動？ – Jennifer 2015-03-31 22:53:54

類似的東西。讓我知道它是如何工作的！也許做一個jsfiddle psot，我們也可以看看同樣的東西在運行。 – 2015-03-31 23:02:55

我想類似的效果可以通過與中風dasharray值播放來實現：

https://jsfiddle.net/4sLw9ag9/2/

... 

stroke-dasharray="391 300" stroke-dashoffset="0" 

.... 

@keyframes draw { 
from { 
stroke-dashoffset: 691; 
} 
to { 
stroke-dashoffset: 0} 
} 

...

只有第一個值是精確的（路徑的長度是391像素），它被一行JavaScript註釋掉，並且不再需要其他功能。另一個值可以根據最佳視覺進行調整。

編輯 - 以前刪除的答案，但它似乎比評論更相關。所以，不要介意我會以小的更新取消刪除。

來源

2015-03-31 23:10:09 Shikkediel

謝謝！ stroke-dasharray是我正在尋找的缺失元素。 – Jennifer 2015-04-01 15:43:36

如何讓動畫SVG儘早開始「繪製自己」？

回答

相關問題