Stroke line animations in perspective

Ignition Early Access
1

Hello
I'd like to animate a SVG stroke line in perspective with CSS3 like this:

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

The problem is i don't know where should I put @keyframe command in perspective?

2 Likes
2

Hey Nader,

Did you ever get this to work? Iā€™d like to try something similar.

3

Hi @mcarritt1
Yes of course. Just put your keyframes in light.css and call it with animation: dash 5s linear in your style of your svg element (not the svg root style)

1 Like