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.

4

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

5

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

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)
6

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.

7

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

image
image1393Ă—601 74 KB

image
image686Ă—242 14 KB

8

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.

9

I think the issue stems from this line here:

.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:

@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;
}
4 Likes
10

This worked for me thank you!

1 Like