# Using the css stylesheet manager to animate svg component

**URL:** <https://forum.inductiveautomation.com/t/using-the-css-stylesheet-manager-to-animate-svg-component/66662>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 17, 2022, 11:42pm UTC](https://forum.inductiveautomation.com/t/using-the-css-stylesheet-manager-to-animate-svg-component/66662 "2022-11-17T23:42:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\
**Post date:** [November 17, 2022, 11:42pm UTC](https://forum.inductiveautomation.com/t/using-the-css-stylesheet-manager-to-animate-svg-component/66662/1 "2022-11-17T23:42:59Z")

</div>

Could someone help me with applying a CSS style to an svg component? My understanding is that in the new 8.1.22 stylesheet manager you add something along the lines of:

```auto
.psc-rotate {
  animation: rotation 2s infinite linear;
}

```

Then, in the object you want to animate you add a style and classes attribute, and just type in "rotate", although you have to select one of the defined styles first to get the text widget to type something in. If you were using one of the style classes typically defined under styles on an SVG element, such as something with a shape fill, you'd have to delete the locally defined fill on the object to prevent it from overriding the style class. But how does a CSS declaration become a style class? Am I leaving out a bit of definition in the CSS manager? I'm really a beginner and was wondering if this is somewhere on the right track. I haven't had any luck getting it to work so far, at least not with rotate.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 18, 2022, 12:13am UTC](https://forum.inductiveautomation.com/t/using-the-css-stylesheet-manager-to-animate-svg-component/66662/2 "2022-11-18T00:13:14Z")

</div>

You need a `keyframes` declaration as well:

```css
.psc-rotate {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/4/c42ff02d54bc44043f5aa7fd86b7c136e77fcc06.png)  
 ![Kapture 2022-11-17 at 16.08.41](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/b/1b4046044f7ca56ffae203672aa032fd3ae27183.gif)

> [@tcrucet](#):
>
> But how does a CSS declaration become a style class?

The trick is that things actually work in the opposite direction. "Style classes" are an Ignition invention, and ultimately end up on the page as regular CSS selectors and rules (because that's all the browser understands). You can even open these up in your browser's dev tools:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/3/031a191cf198370f8d46001a385eeed121a6b3d2.png)

The "psc" prefix is an Ignition _convention_, because we wanted to separate Ignition's named styles from "true" CSS selectors that we might need to style our own components, and from theming. When you add values to the `style.classes` property of a Perspective component, that will be emitted as the classname of the actual HTML element (again, browser devtools are incredible):  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6d2a89840129eac0c1a6d7f69b17c367743ef144.png)

The `.psc-$className` rule in the `style.css` file is, because of the rules of CSS, going to apply to any component with the _class name_ `psc-$className`.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [November 18, 2022, 2:11am UTC](https://forum.inductiveautomation.com/t/using-the-css-stylesheet-manager-to-animate-svg-component/66662/3 "2022-11-18T02:11:43Z")

</div>

You can also use the predefined animation class that @lrose pointed out in this thread.

> [@Animation for Symbol Factory In Perspective](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/10):
>
> animation is the way to go like @Matthew.gaitan suggested

---

<div class="post-metadata">

**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\
**Post date:** [November 18, 2022, 3:18pm UTC](https://forum.inductiveautomation.com/t/using-the-css-stylesheet-manager-to-animate-svg-component/66662/4 "2022-11-18T15:18:37Z")

</div>

Thanks so much! I forgot to mention the svg element is part of a larger imported drawing; I'm trying to hold everything together in a coordinate container set to % when resizing, instead of drifting apart like Pangea. As such, your solution worked except the element was whipping around origin point 0,0 for the entire drawing instead of spinning in place. I did some changes and found this to work for what I needed:

```auto
.psc-rotate {
    transform-box: fill-box;
    transform-origin: center center;
    animation: rotating 2s linear infinite;
}

@keyframes rotating {
  100% { 
    transform: rotate(360deg);
    }
}

```

Thanks again!

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [November 18, 2022, 3:53pm UTC](https://forum.inductiveautomation.com/t/using-the-css-stylesheet-manager-to-animate-svg-component/66662/5 "2022-11-18T15:53:39Z")

</div>

> [@tcrucet](#):
>
> I'm trying to hold everything together in a coordinate container set to % when resizing, instead of drifting apart like Pangea.

Did you try setting the `props.aspectRatio` ?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 18, 2022, 5:37pm UTC](https://forum.inductiveautomation.com/t/using-the-css-stylesheet-manager-to-animate-svg-component/66662/6 "2022-11-18T17:37:42Z")

</div>

Tip: format your code using the \</\> button. That will preserve indents and apply syntax highlighting. There's an edit button below your posts if you want to fix them.

---

<div class="post-metadata">

**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\
**Post date:** [November 18, 2022, 6:12pm UTC](https://forum.inductiveautomation.com/t/using-the-css-stylesheet-manager-to-animate-svg-component/66662/8 "2022-11-18T18:12:04Z")

</div>

Thanks, that helps!