# Stroke line animations in perspective

**URL:** <https://forum.inductiveautomation.com/t/stroke-line-animations-in-perspective/29909>\
**Category:** Ignition Early Access\
**Created:** [November 13, 2019, 12:09pm UTC](https://forum.inductiveautomation.com/t/stroke-line-animations-in-perspective/29909 "2019-11-13T12:09:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [November 13, 2019, 12:09pm UTC](https://forum.inductiveautomation.com/t/stroke-line-animations-in-perspective/29909/1 "2019-11-13T12:09:41Z")

</div>

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

> **[stroke-dasharray | CSS-Tricks](https://css-tricks.com/almanac/properties/s/stroke-dasharray/)**
>
> The stroke-dasharray property in CSS sets the length of dashes in the stroke of SVG shapes. More specifically, it sets the length of a pattern of alternating

> ```auto
> .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?

---

<div class="post-metadata">

**Author:** ![mcarritt1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mcarritt1/32/4262_2.png) [@mcarritt1](https://forum.inductiveautomation.com/u/mcarritt1)\
**Post date:** [August 5, 2020, 9:03am UTC](https://forum.inductiveautomation.com/t/stroke-line-animations-in-perspective/29909/2 "2020-08-05T09:03:57Z")

</div>

Hey Nader,

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

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [August 5, 2020, 6:12pm UTC](https://forum.inductiveautomation.com/t/stroke-line-animations-in-perspective/29909/3 "2020-08-05T18:12:32Z")

</div>

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)