# Using CSS class to animate individual elements from the drawing object

**URL:** <https://forum.inductiveautomation.com/t/using-css-class-to-animate-individual-elements-from-the-drawing-object/114393>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 9, 2026, 2:13pm UTC](https://forum.inductiveautomation.com/t/using-css-class-to-animate-individual-elements-from-the-drawing-object/114393 "2026-03-09T14:13:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Duckster](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/duckster/32/82736_2.png) [@Duckster](https://forum.inductiveautomation.com/u/Duckster)\
**Post date:** [March 9, 2026, 2:13pm UTC](https://forum.inductiveautomation.com/t/using-css-class-to-animate-individual-elements-from-the-drawing-object/114393/1 "2026-03-09T14:13:37Z")

</div>

I am trying to style individual elements in my pump drawing and when I add the style to the object itself it applies to all elements but when I add the style to on specific element it does not work. Below is my current style class and animations:

```python
@keyframes psc-pmpALM-anim {
0% { fill: #FF000055; }
100% { fill: #FF000088; }
0% { stroke: #000000; }
100% { stroke: #FF0000; }
}

.psc-pmpALM path {
animation-name: psc-pmpALM-anim;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;

}
.psc-pmpAcked path {
stroke: #FF0000 !important;
fill: #FFBEBE !important;
}
.psc-pmpW path {
fill: #FFFFFF !important;
}
.psc-pmpG path {
fill: #B0B0B0 !important;
}

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 10, 2026, 10:41am UTC](https://forum.inductiveautomation.com/t/using-css-class-to-animate-individual-elements-from-the-drawing-object/114393/2 "2026-03-10T10:41:18Z")

</div>

You need to apply the style to the SVG element itself. You'll probably need to add the `styles.classes` prop manually

---

<div class="post-metadata">

**Author:** ![Duckster](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/duckster/32/82736_2.png) [@Duckster](https://forum.inductiveautomation.com/u/Duckster)\
**Post date:** [March 16, 2026, 2:00pm UTC](https://forum.inductiveautomation.com/t/using-css-class-to-animate-individual-elements-from-the-drawing-object/114393/3 "2026-03-16T14:00:29Z")

</div>

I had already done that, however when I call the style nothing seems to happen. I no longer need this feature in my application, however it would still be something good to know.

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [March 16, 2026, 2:14pm UTC](https://forum.inductiveautomation.com/t/using-css-class-to-animate-individual-elements-from-the-drawing-object/114393/4 "2026-03-16T14:14:37Z")

</div>

Sometimes the fill paint on an element will interfere with style bindings. I usually apply the style and look at it. If the style isn’t showing up I delete the fill paint nodes and see if it’s visible. Sometimes I set the fill paint to transparent. When you delete the fill paint node it usually makes the element totally black. Sometimes I have to set that to transparent and sometimes my style fixes it.

It’s one of those things that can be a little weird as it behaves differently on different drawings. I haven’t dug into it enough to figure out exactly what’s going on because it’s usually quicker for me to just try a few things and see what is working on a specific drawing.

---

<div class="post-metadata">

**Author:** ![Duckster](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/duckster/32/82736_2.png) [@Duckster](https://forum.inductiveautomation.com/u/Duckster)\
**Post date:** [March 16, 2026, 3:03pm UTC](https://forum.inductiveautomation.com/t/using-css-class-to-animate-individual-elements-from-the-drawing-object/114393/5 "2026-03-16T15:03:31Z")

</div>

That doesn’t seem to be working as well, it is doing the ‘all black’ behavior that you mentioned.

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [March 16, 2026, 3:14pm UTC](https://forum.inductiveautomation.com/t/using-css-class-to-animate-individual-elements-from-the-drawing-object/114393/6 "2026-03-16T15:14:56Z")

</div>

did you add a style element to that element?

Edit:

Sometimes when you get the black fill you have to leave the paint element and make it fill with “transparent”

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 16, 2026, 8:49pm UTC](https://forum.inductiveautomation.com/t/using-css-class-to-animate-individual-elements-from-the-drawing-object/114393/7 "2026-03-16T20:49:29Z")

</div>

It could be the `path` selector in the rule, try it without that.