Help with animation delay in css for svg

Design help General
1

Hello everyone,

Perhaps anyone could assist …

So lets say I have a line in svg.

path fill-opacity=“0” stroke=“#FFF” stroke-width=“1.5” d=“M115,26.4 L788.3,26.4”

in css, i make animation for it:

.myline{
stroke-dasharray: 800;
stroke-dashoffset: 800;
animation: linedraw 1s linear forwards;
}
@keyframes linedraw {
to {
stroke-dashoffset: 0;
}

It’s all working fine.

Then i add animation delay in css like:

.drawdelay{
animation-delay:2s;
}

and i get my line looking like:

path class=“myline drawdelay” fill-opacity=“0” stroke=“#FFF” stroke-width=“1.5” d=“M115,26.4 L788.3,26.4”

and its working … line is drawn 2s later.

BUT

If I wrap it in svg like:

svg class=“myline drawdelay”>
path fill-opacity=“0” stroke=“#FFF” stroke-width=“1.5” d=“M115,26.4 L788.3,26.4”
/svg>

Then the line is drawing but animation delay not working!

I know, first question would be "why you need to wrap it in svg?
Well, i want to draw it only on mouse over and i don’t want to write a java script so i did a trick:
.myline{
opacity:0;
}
.myline:hover{
opacity:100;
}

I guess its a matter of a syntax and i need to put animation-delay in a right place, but i can’t figure out where.

help is much apreciated

2

Can you please provide a read only link, thanks! :wink:

3

Hi,

It’s hard to see a problem on a website …

basically the issue is that

working:
path class=“myobect delayanimation”

not working (only delay animation not working):
svg class=“myobject delayanimation”
path

4

Ok, it’s just I’m a more visual person so can’t really tell you the problem without seeing the Webflow UI organizing the content. :wink::blush:

5

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