如何让动画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尽早开始“绘制自己”？

回答

相关问题