Using stylesheet.css to make an icon blink

Ignition
,
1

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.

@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;
}
2
  • 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
3

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.