How to apply CSS animation to active entity?

Configuration Frontend
1

I’d like to add a CSS animation to an entity icon when that entity is active.

For instance, I have a dashboard with an entity card, referencing a motion sensor. I want that, when there is motion, corresponding icon not just lights up but also blinks.

While I can customize icon’s color by applying a theme to the card, I can’t figure how to add the blinking animation.

The theme I apply to the card is the following, and the icon color is the expected one when the sensor is active:

Green:
  state-icon-color: "green"
  state-icon-active-color: "green"
  state-icon-unavailable-color: var(--disabled-text-color)

I thought I could add a stylesheet in my resources with the following content, but I guess I use the wrong selector:

[data-state="on"] svg {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
1 Like
2

This can be done with custom button card.

I first saw animation using that card here: https://www.facebook.com/swakefield88/videos/859748268114/

I then went all-in on the custom button card and wrote a big post on my results: Fun with cutom:button-card

1 Like
3

Thanks for the reply !

Great topic you made. It works perfectly ! Thank you very much !

1 Like