Temporary icon effect?

1

Maybe I’m missing something obvious but is it possible to have an icons effect temporarily in effect when a status / variable changes? I’m going to add audio alerts but I’d like to see at a glance what just changed. A temporary pulse for like 10 seconds at least let me know where to focus attention after the sound has gotten my attention. Thank you

Edit: currently I guess a workaround is creating an initial state and a set state. When it initially changes set the icon to pulse. Then have an automation to change that effect to another effect after 10-20s. The icon stage for the permanent state would not pulse.

2

Yes, that would be the official recommendation for a device or variable that you control.

Unofficially, you could probably also achieve it with Custom CSS and the animation-iteration-count property.

1 Like
3

Thanks. Although it sounds like a bunch of extra rules to make I think I’ll go that route since I’m not very well versed in css

1 Like
4

Hi my friend, I like your idea, its cool that effect, can you share your CSS when its done ?..do you mind ?

5

I played with it a bit and it seems like you would need to adjust it to fit your needs. This plays the animation 2 times.

.tile.--theme-style-STYLENAME .icon {
   animation-iteration-count: 2!important;
}

Some animations are faster than others though, so you might want a different number of loops.