I can animate a card, but not a Badge

Configuration Frontend
1

I have this card setup on the main dashboard and it animates the fan.

type: custom:mushroom-entity-card
icon: mdi:fan
entity: switch.loft_fan_switch
name: Loft Fan
icon_color: green
secondary_info: last-changed
visibility:
  - condition: state
    entity: switch.loft_fan_switch
    state_not: "off"
layout_options:
  grid_columns: 4
  grid_rows: 1
card_mod:
  style: |
    ha-state-icon {
      {{ 'animation: spin 1s linear infinite;' if is_state('switch.loft_fan_switch', 'on') }}
      }

I took the animation section and added to a Badge and it will not animate. What have I missed?

type: entity
show_name: true
show_state: true
show_icon: true
entity: switch.loft_fan_switch
visibility:
  - condition: state
    entity: switch.loft_fan_switch
    state_not: "off"
name: Loft Fan
icon: mdi:fan
color: green
state_content: last_changed
card_mod:
  style: |
    ha-state-icon {
      {{ 'animation: spin 1s linear infinite;' if is_state('switch.loft_fan_switch', 'on') }}
      }
2

Can you be more specific with the term badge?

There is a type: custom:mushroom-template-badge or are you talking about the badge option with the type: custom:mushroom-template-card?

type: custom:mushroom-template-card
icon: mdi:toggle-switch-variant-off
badge_icon: mdi:fan
badge_color: white
primary: Example
icon_color: blue
card_mod:
  style: |
    mushroom-badge-icon {
      animation: spin 1.5s linear infinite ;
      --icon-color: blue;
         }
3

Or perhaps this is a standard badge shown on a top of a view?

1 Like
4

Agreed and figured that was probably the case. It’s just a big jump from using card_mod code from a type: custom:mushroom-entity-card to modifying a standard entity badge :grin:

Haven’t explored all the methods…

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  show_name: false
  show_state: true
  show_icon: true
  entity: fan.bedroom_fan
card_mod:
  style:
    hui-entity-badge$: |
      ha-state-icon {
        animation: spin .5s linear infinite;
            }
      @keyframes spin {
        100% {
          transform: rotate(360deg);
            }
5

It is the badge at the top of the Dashboard. I didn’t pick the badge option, I chose the entity option. I changed the type to custom:mushroom-entity-card, but all the text disappeared and it was the wrong size. I have tried the solutions suggested yet. I will do that tomorrow.

6

Thanks very much foe the answer. I had to tweak it a bit. The fan is actually controlled by a plug so the icon was a switch. I had to change it to a fan. I slowed the animation down to match my other card.

I also put the visibility back. This is my final version

type: custom:mod-card
visibility:
  - condition: state
    entity: switch.loft_fan_switch
    state_not: "off"
card:
  type: custom:hui-entity-badge
  show_name: true
  show_state: true
  show_icon: true
  icon: mdi:fan
  entity: switch.loft_fan_switch
card_mod:
  style:
    hui-entity-badge$: |
      ha-state-icon {
        animation: spin 1s linear infinite;
            }
      @keyframes spin {
        100% {
          transform: rotate(360deg);
            }