How text after 4 seconds

I have a SVG with many

<text>...</text>

and am trying to figure out how to make the text appear after about 4 seconds
This is what I have soo far, but it doesnt work

text { 
stroke:none; 
stroke-width:.4; 
stroke-dasharray: 50; 
animation: my_animation2 1s; 
animation-delay: 3s;
} 
@keyframes my_animation2{ 
100%{ 
stroke: #000; 
} 
}
1 Like

I don’t know much about svg but you could just fade it in using opacity.

e.g.

text { 
	opacity:0;
	stroke:red; 
	stroke-width:.4; 
	stroke-dasharray: 50; 
	animation: my_animation2 1s forwards 3s;
} 
@keyframes my_animation2{ 
	100%{opacity:1;} 
}

Hi there lurtnowski,

you have probably forgotten that the SVG text element
uses fill not stroke to color it.

So…

text { 
    fill: transparent;
    animation: my_animation2 1s forwards; 
    animation-delay: 3s;
 } 

@keyframes my_animation2 { 
100%{ 
   fill: #000;
  } 
 }

…is what you require. :winky:

coothead

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.