Stroke line animations in perspective

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?


Hey Nader,

Did you ever get this to work? I’d like to try something similar.

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)