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;
}
}