I’ve got a picture-elements
card configured nicely. I wanted to add custom CSS to get a fan icon rotating, so I’ve installed card-mod. Using this great post as a starting point, I can make an icon (ha-svg-icon
) rotate, but I can’t make it state-based.
If I try to add a [data-state="on"]
attribute selector to the ha-icon
element, it applies too high up in the CSS, and only gets injected if it matches the state at page refresh.
type: picture-elements
image: /local/home.svg
elements:
- type: state-icon
entity: switch.fan
icon: mdi:fan
tap_action:
action: toggle
style:
top: 17.5%
left: 6%
card_mod:
style:
state-badge:
$:
ha-icon[data-state="on"]:
$: |
ha-svg-icon {
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
If I move the CSS up to the ha-icon
, it selectively applies by state in real-time (no refresh required, red background added for testing), but it doesn’t rotate!
card_mod:
style:
state-badge:
$: |
ha-icon[data-state="on"] {
animation: rotation 2s linear infinite;
background: red;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
What am I doing wrong? Why does the ha-icon
refuse to rotate, when the ha-icon-svg
is happy to?