#Using card_mod to animate an icon in a card

1 messages · Page 1 of 1 (latest)

mellow jetty
#

I'm using a mushroom-chips-card and trying to get the icon in the center to animate using card_mod. i can't seem to figure out the magic to target the right selector.

card:
  type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:fan
        tap_action:
          action: toggle
        entity: fan.snooz
        card_mod:
          style: |
            ha-card {
              padding: 5px!important;
              border-radius: 100px!important;
            }
            ha-icon  {
              animation: slow-rotate 2s linear infinite;

              @keyframes slow-rotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
              }
            }

Can anyone help steer me in the right direction?

limber oxide
#

"type": "custom:button-card",
"entity": "switch.on_off_vmc",
"icon": "mdi:fan",
"show_name": false,
"state": [
{
"value": "on",
"color": "orange",
"styles": {
"icon": [
{
"animation": "rotating 3s linear infinite"
}
]
}
}
Here my config with a custom button card (in json format srry)

brave pagoda
#

The custom:button-card and Mushroom cards have a completely different syntax. The custom:button-card has is own internal styling but the Mushroom card would need card_mod.
I tried animating the icon yesterday by targeting ha-icon and ha-state-icon which works for the regular cards but for some reason doesn't work with the chip.

drifting gyro
# brave pagoda The custom:button-card and Mushroom cards have a completely different syntax. Th...
brave pagoda
# drifting gyro Refer to this awesome guide - https://community.home-assistant.io/t/mushroom-car...

Yeah. I considered that after I posted that message. However, it uses a method that I was trying to avoid. The method in the forum uses card_mod at the chip's container level and has to target the nth-child objects. I was trying to apply the card_mod directly to the chip itself which some stuff worked and others did not. If my method would have worked, it would have kept the card_mod with the chip. If a chip is added before the chip-to-be-animated, the card_mod portion would also have to be updated to reflect the chip's new position.

#

@mellow jetty Follow Danny Bhoy's link. You should find what you need in there.