# Using stylesheet.css to make an icon blink

**URL:** <https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [January 15, 2026, 5:35pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326 "2026-01-15T17:35:04Z")\
**Posts on this page:** 10\
**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:** [January 15, 2026, 5:35pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/1 "2026-01-15T17:35:04Z")

</div>

I am using the stylesheet.css to manage my styles, and I want to make an alarm icon blink in the smooth form that the style below allows for. Any ideas how I can make this work using the style sheet? I am using 8.1.45 and am planning to upgrade to 8.3.2 here next week.

```python
@keyframes psc-blinker-anim {
     0% { fill: #FF0000; }
     100% { fill: #D0D0D0; }
}

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

```

---

<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:** [January 15, 2026, 8:23pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/2 "2026-01-15T20:23:37Z")

</div>

- Update to this, when I go from design to runtime it quits working. I have found that the CSS animation is not being applied at runtime, however it would still work on the designer

---

<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:** [January 15, 2026, 8:49pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/3 "2026-01-15T20:49:51Z")

</div>

Check the silly stuff. Use the browser's Developer Tools (F12), find the CSS file and check that your animation class is actually in there. If not, then Ctrl-F5 should reload everything from the site and update the cache.

---

<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:** [January 15, 2026, 9:27pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/4 "2026-01-15T21:27:54Z")

</div>

Yup already gone through that routine, the CSS does not show the animation class in the Dev tools

---

<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:** [January 15, 2026, 9:38pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/5 "2026-01-15T21:38:05Z")

</div>

When looking through the computed tab this is what the animations look like, i am at this point selecting the svg of the Icon. It shows that the class = “pcs-blinker”, however it does not show the animation style as seen below

```python
accent-color auto
align-content normal
align-items normal
align-self auto
alignment-baseline auto
all
animation-composition replace
animation-delay 0s
animation-direction normal
animation-duration 0s
animation-fill-mode none
animation-iteration-count 1
animation-name none
animation-play-state running
animation-range-end normal
animation-range-start normal
animation-timeline auto
animation-timing-function ease
app-region none
appearance none
aspect-ratio auto
backdrop-filter none
backface-visibility visible
background-attachment scroll
background-blend-mode normal
background-clip border-box
background-color rgba(0, 0, 0, 0)
background-image none
background-origin padding-box
background-position-x 0%
background-position-y 0%
background-repeat repeat
background-size auto
baseline-shift 0px
baseline-source auto
block-size 50px
border-block-end-color rgb(50, 50, 50)

```

---

<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:** [January 15, 2026, 9:38pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/6 "2026-01-15T21:38:39Z")

</div>

It's not quite clear where you looked for the style. I added an easily identifiable comment into my Advanced Stylesheet, saved, and launched the project.

In Developer Tools → Network → CSS → style.css.

The comment showed up in there along with some other stuff that is in the Advanced Stylesheet and more stuff that isn't.

---

<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:** [January 15, 2026, 9:52pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/7 "2026-01-15T21:52:40Z")

</div>

i found the style sheet, however what I was sending is from the \</\> Elements tab

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/a/9a8adf843b7418d3f7fedfc9824e6e040231e39e.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1ef7343c0ba2ac360420b31773ea176f4eb952bc.png)

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [January 15, 2026, 9:59pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/8 "2026-01-15T21:59:10Z")

</div>

Take a look in the styles tab next to computed. Use that to confirm that the style information is being applied and isn't being subsequently overwritten by some other conflicting style.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 16, 2026, 12:27am UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/9 "2026-01-16T00:27:23Z")

</div>

I think the issue stems from this line here:

```python
.psc-blinker svg path {

```

In the browser session, the `<svg>` element is what has the `.psc-blinker` class. I can’t speak for why it’s working in the Designer, but after removing the “svg” piece of the selector (and I suspect you’d see the same results by declaring an `<svg>` with the given class, a la “svg.psc-blinker”) I was able to see the animation in the browser session.

So try this:

```python
@keyframes psc-blinker-anim {
     0% { fill: #FF0000; }
     100% { fill: #D0D0D0; }
}

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

```

---

<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:** [January 16, 2026, 1:45pm UTC](https://forum.inductiveautomation.com/t/using-stylesheet-css-to-make-an-icon-blink/113326/10 "2026-01-16T13:45:02Z")

</div>

This worked for me thank you!