How to restart automatically an animated svg line after finished? - css

I have an animated svg line using css.
I want animation takes 200s as duration, but I want that line restart automatically again after it finish.
This is an example of my code.
line {
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 500%;
stroke-dasharray: 0 \0/;
stroke-dashoffset: 0 \0/;
-webkit-animation: draw 200s infinite;
animation: draw 200s infinite;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes draw {
0% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}
#keyframes draw {
0% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}
<body>
<svg height="100" width="250">
<line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</body>
In order to restart the animation, I changed animation tag:
-webkit-animation: draw 200s 2s infinite;
animation: draw 200s 2s infinite;
However, the effect I got was:
first: the line ends after two seconds.
It starts over with the desired duration (200s). However, after it finish, it doesn't start again immediately.
How can I restart animation automatically after it finish. Do I need to use javascript or jquery?


The issue is that the duration of your animation is set to 200s, therefore according to your CSS it will loop over again after 200 seconds and a further 2 seconds delay. From what I understand, you want the line to be drawn slowly and therefore you're using a 200s animation, which isn't the best way to achieve that -- at least not since you want the animation to restart after a short delay.
You can make the line slower by using ease-in in conjunction with changing the animation as per below. This should achieve the desired affect you're looking for.
line {
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 500%;
stroke-dasharray: 0 \0/;
stroke-dashoffset: 0 \0/;
-webkit-animation: draw 2s ease-in infinite;
animation: draw 2s ease-in infinite;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes draw {
0% {
stroke-dashoffset: 500%;
},
99% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}
#keyframes draw {
0% {
stroke-dashoffset: 500%;
},
99% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}
<body>
<svg height="100" width="250">
<line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</body>

Related

How to set multiple keyframes to run respectively after each other for infinite times

I have an svg container div containing multiple svg text to set the first text to fadeout and the second text to fadein in its place using css keyframes. I was wondering if there is anyway to set the entire animation to play infinity?
<html>
<div id="fading">
<svg>
<text class="fadingA" x="20%" y="50%">Follow Me</text>
<text class="fadingB" x="13%" y="50%">On Social Media</text>
</svg>
.fadingA{
font-size: 100px; fill:#BFAE99;
stroke: #171F26; stroke-width:3px;
stroke-dasharray: 352.6px;
animation: animate1 3s ease forwards;
}
.fadingB{
font-size: 100px; fill: transparent;
stroke: #171F26; stroke-width:3px;
stroke-dasharray: 457.7px;
stroke-dashoffset: 457.7px;
animation: animate2 3s ease forwards;
animation-delay: 3s;
}
#keyframes animate1{
to{
stroke-dashoffset: 352.6px;
fill: transparent;
}
}
#keyframes animate2 {
to{
stroke-dashoffset:0px;
fill:#BFAE99;
}
}

Problem with starting point of SVG animation for a path/arc

I'm trying to animate this SVG path/arc, from the beginning point to the end point, but I can not achieve that. Actually, the animation starts at the midpoint of the arc.
My arc's code is:
#arc {
display: block;
stroke-dashoffset: 3925px;
stroke-dasharray: 3925px;
}
#arc {
-webkit-animation: dashAnim 1s 1s linear alternate forwards;
animation: dashAnim 1s 1s linear alternate forwards;
}
#keyframes dashAnim {
0% {
stroke-dashoffset: 3925px;
}
100% {
stroke-dashoffset: 0px;
}
}
<svg id="arc" viewBox="0 0 1922 100.2">
<path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5"
strokeMiterlimit="10" d="M969.3,21.9c-344.4,0-669.8,82.4-956.8,229.7v6
h1922.3C1646,106.7,1317.2,21.9,969.3,21.9z"/>
</svg>
Can anyone help?

When opened in application like Illustrator, your path had additional points off canvas. I cleaned them up and the animation seems to work as you wanted.
There were no other obvious problems with the path that I could find.
My guess is - when you animate a closed path that is effectively a circle, something has to be the beginning and the end. In this case it was the middle of the arc.
#arc {
display: block;
stroke-dashoffset: 3925px;
stroke-dasharray: 3925px;
}
#arc {
-webkit-animation: dashAnim 1s 1s linear alternate forwards;
animation: dashAnim 1s 1s linear alternate forwards;
}
#keyframes dashAnim {
0% {
stroke-dashoffset: 3925px;
}
100% {
stroke-dashoffset: 0px;
}
}
<svg id="arc" viewBox="0 0 1922 100.2">
<path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5"
strokeMiterlimit="10" d="M1591.4,115.8c-196.6-61.1-405.6-93.9-622.1-93.9c-218.8,0-430,33.3-628.5,95.3"/>
</svg>

Specific Path Not Animating Using Dashoffset as Expected

I have a SVG path that I'm trying to animate to "draw" itself, using the stroke-dasharray/stroke-dashoffset combination trick (see this article for more info). However, that trick does not work on this path, despite (as far as I can tell) everything being correctly implemented. So, my question is, what have I done wrong here?
This is the path in question:
<path class="cls-1" d="M13.36,28.18c-8.06,5.19-9.74,17-4,24.91a31.38,31.38,0,0,0,3.19-4.71L34.92,9.74C38.67,3.19,44.1,0,48.65,0,65.17,0,63.9,21,47.13,26.66c16,10.62,4.47,40.4-20.36,40.4C-2.29,67.06-7.39,35.05,10,24ZM35,27.94l-2.24-.24-14,24.19a42.77,42.77,0,0,1-4.15,5.91,23.84,23.84,0,0,0,12,2.87C46.73,60.67,54.48,32,35,27.94Zm.56-5.11c8.46-.16,13.17-2,16.36-8,4.15-7.82-3.59-14-9.66-3.51Z"></path>
And the CSS (simplified for example) I'm using:
path {
stroke-dasharray: 415.9850769042969;
stroke-dashoffset: 415.9850769042969;
animation: letterB 5s linear infinite;
}
#keyframes letterB {
to {
stroke-dashoffset: 0;
}
}
I have tried:
Adjusting the length of the dashoffset/dasharray
Testing in other browsers (Safari 11.0.3, Firefox 57.0.4)
Not really sure what to do, or what's up, so any guidance on why this animation isn't working would be greatly appreciated.
Also, I created a reduced case on JSFiddle.
Primary environment:
Chrome v64.0.3282.140

You will need to set the fill:none to the svg to aniamtion take place...also a stroke and stroke-width...
...actually the idea is here to animate your stroke
Stack Snippet
svg {
padding: 20px;
}
path {
stroke-dasharray: 415.9850769042969;
stroke-dashoffset: 415.9850769042969;
animation: letterB 5s linear forwards infinite;
-webkit-animation: letterB 5s linear forwards infinite;
}
#keyframes letterB {
0% {
stroke-dashoffset: 415.9850769042969;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes letterB {
0% {
stroke-dashoffset: 415.9850769042969;
}
100% {
stroke-dashoffset: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.67 67.06">
<path class="cls-1" d="M13.36,28.18c-8.06,5.19-9.74,17-4,24.91a31.38,31.38,0,0,0,3.19-4.71L34.92,9.74C38.67,3.19,44.1,0,48.65,0,65.17,0,63.9,21,47.13,26.66c16,10.62,4.47,40.4-20.36,40.4C-2.29,67.06-7.39,35.05,10,24ZM35,27.94l-2.24-.24-14,24.19a42.77,42.77,0,0,1-4.15,5.91,23.84,23.84,0,0,0,12,2.87C46.73,60.67,54.48,32,35,27.94Zm.56-5.11c8.46-.16,13.17-2,16.36-8,4.15-7.82-3.59-14-9.66-3.51Z"
fill="none" stroke-width="2" stroke="#000000"></path>
</svg>

Reducing size of SVG tick

I have created an SVG animation tick here: https://plnkr.co/edit/5FlA5j8iXO4EPCzxAugs?p=preview
How can i reduce the size of the tick? For example, to half of the size shown?
#check {
fill: none;
stroke: green;
stroke-width: 20;
stroke-dasharray: 180;
stroke-dashoffset: 180;
-webkit-animation: draw 1.2s infinite ease;
animation: draw 1.2s infinite ease;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
-webkit-#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="150" height="150">
<path id="check" d="M10,30 l30,50 l95,-70" />
</svg>

You can use css transform: scale(0.5); to #check like this:
The CSS transform property lets you modify the coordinate space of the
CSS visual formatting model. Using it, elements can be translated,
rotated, scaled, and skewed. - by Mozilla MDN
#check {
transform: scale(0.5);
fill: none;
stroke: green;
stroke-width: 20;
stroke-dasharray: 180;
stroke-dashoffset: 180;
-webkit-animation: draw 1.2s infinite ease;
animation: draw 1.2s infinite ease;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
#-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="150" height="150">
<path id="check" d="M10,30 l30,50 l95,-70" />
</svg>

I'd suggest to add the viewbox attribute to your svg element so you could properly control the size of your element by simply changing the width and/or the height while keeping its aspect and its internal coordinate system.
Your element has approx.ly a 140 x 95 viewbox so you could write
<svg width="50" viewbox="0 0 140 95">
<path id="check" d="M10,30 l30,50 l95,-70" />
</svg>
Example: https://plnkr.co/edit/ERuQr4NsKfYHT7kebjkR?p=preview

SVG animation not working in Safari/IE

I have this SVG line animation that draws in a text, however it doesn't seem to work on Safari nor Internet Explorer. IS there something I'm missing?
http://codepen.io/anon/pen/VYgdZv
CSS
svg path {
fill: none;
stroke: #000;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1700;
stroke-dashoffset: 1700;
animation: dash 5s ease-out forwards;
-webkit-animation-name:dash;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease-out;
-webkit-animation-fill-mode:forwards;
-moz-animation: dash 5s ease-out forwards;
-o-animation: dash 5s ease-out forwards;
-ms-animation: dash 5s ease-out forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
to {
stroke-dashoffset: 0;
}
}

CSS animations, transitions, transforms (as well as classList or dataset in JS) don't work in IE 11 and older. The transitions/ animations problem has just been fixed in the Edge engine (same goes for classList), but for IE11 and older, the only solution is to use JS (SMIL animations don't work either, plus Chrome might drop SMIL as well - update: SMIL is on its way out, don't use it!).
This is an example of how you can do it:
var p = document.querySelector('.animate'),
offset = 1000;
var offsetMe = function() {
if(offset < 0) offset = 1000;
p.style.strokeDashoffset = offset;
offset--;
requestAnimationFrame(offsetMe);
}
offsetMe();
#keyframes fadeInP {
to {
stroke-dashoffset: 0;
}
}
.animate {
stroke-dashoffset: 1000;
/*animation: fadeInP 10s linear infinite;*/
}
/*
CSS animations don't work for this in IE and neither do SMIL animations.
*/
<svg viewBox="0 0 400 400">
<path stroke-width='8' class="animate" stroke-dasharray="10 10" fill='none' stroke="#000" d="M 0,0 C 100,10 200,80 300,15 " />
</svg>
One quick note about your code: always write the unprefixed version of rules last and you don't need -ms-animation (IE10+ supports animations unprefixed, while IE9 does not support them at all).

Resources