Thanks for the reply!
Indeed, Iāve managed to make your example with a rotating icon on a mini graph work well here, and I think Iāve understood what was wrong in my initial approach - basically:
- I was starting with āmini-graph-card$ā instead of within the āha-cardā;
- I need to target the ha-svg-icon level for an animation to apply
- I cannot observe some effects on intermediary levels (itās either the whole header or the icon that is several levels below in the DOM)
Thank you again for these very useful examples.
Nonetheless, getting back to my real problem with a slightly more difficult structure, even after several more hours spent on this, Iām still bumping into an issue that might be due to my lack of correct reading of the DOM.
To contextualize a bit, I have a mini room card and I want to show the state of some sensors on it, through some mushroom-chips. Iād want to be able to apply some of the neat animations shown in this thread on the icons that are within these chips.
My YAML structure is as follows - there are some conditionals Iāve removed to simplify the code (so ignore the fact the icon is static here) and I donāt show how the positioning of s1 is handled:
name: Office
icon: mdi:desk
entity: sensor.temphumsensoroffice_temperature
custom_fields:
s1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: "binary_sensor.occupancysensoroffice_occupancy"
icon: mdi:motion-sensor
icon_color: green
tap_action:
action: more-info
card_mod:
style: |
ha-card .chip-container mushroom-template-chip:
$: |
mushroom-chip ha-state-icon:
$: |
ha-icon:
$: |
ha-svg-icon {
background: red !important;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
For me, this should correspond to the DOM Iām seeing below (and you can see the whole path at the bottom of the screenshot):
However, I do manage to make the whole chip rotate though, if I use:
card_mod:
style: |
ha-card .chip-container mushroom-template-chip {
background: red !important;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
You may say that for this particular example, the outcome is visually the same. But the problem is that eventually, Iāll want to use other animations than rotation, and for instance when clipping with a path, it does matter whether itās the whole chip or just the icon inside that is targeted. So Iām working on rotation merely as an example I want to extend to other animations and it is therefore important to me to target the icon itself.
Iād truly welcome an expert eye on this to point me out the probably obvious mistake I might be doing.
