[Bug]: Can't get icon animation to work

[dnestico]

[Bug]: Can't get icon animation to work

[piitaya]

@MiralDesai You should use the code below. It's just an example in the release that you need to adapt with yours animations.

card_mod:
  style: |
    ha-state-icon {
      animation: pulse 3s 0s infinite;
    }

@dnestico Do you have any code that work with an older version of mushroom?

For other issues, I can not do anything without config example. I added an example if the release note to add animation to a card (not a chip because I don't think it's supported by Mushroom). You need to adapt it with your animation. However, this repo doesn't provide support for card mod customization. I do my best to avoid breaking change but I don't encourage to add such customization to Mushroom card.

[pitiriguisvi]

@dnestico mushroom chips are supported but the syntax is a bit different than regular mushroom cards. Here is the working syntax. The card_mod element must be added at the end for all chip cards.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: group.all_motion_sensor_entities
    icon_color: |-
      {% if is_state('group.all_motion_sensor_entities', 'on')
      %}                            
        green                    
      {% else %}
        disabled
      {% endif %}
    icon: |-
      {% if is_state('group.all_motion_sensor_entities', 'on')
      %}                            
        mdi:motion-sensor                         
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    tap_action:
      action: more-info
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: pulse 3s 0s infinite;
      }

Just increment the number in nth child to apply CSS to the nth chip icon. Hope this helps!

type: custom:mushroom-chips-card
chips:
  - type: template
    icon_color: red
    icon: mdi:washing-machine
    entity: sensor.washing_machine
  - type: template
    icon_color: red
    icon: mdi:tumble-dryer
    entity: sensor.trockner
  - type: template
    icon: mdi:fan
    icon_color: amber
    entity: sensor.washing_machine
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: shake 400ms ease-in-out infinite, drum 1s infinite;
        transform-origin: 50% 65%;
      }
      @keyframes shake {
        0%, 100% { transform: rotate(4deg); }
        50%  { transform: rotate(-4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        animation: rotation 1.5s linear infinite;
      }
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }      

How are you supposed to combine it with any other styles?

Example:

    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-icon-size: 20px;
          margin-top: 4px;
          margin-right: 4px;
          --chip-border-width: 0px;
        }
        :host {
          background-color: rgba(var(--rgb-card-background-color), 0.75);
          bottom: 0px;
          left: 0px;
          right: 0px;
          height: 44px;
        }

    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
            animation: rotation 1.5s linear infinite;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }  

i´ve got exactly the same question! Did you manage it?

[MiralDesai]

Want to add that I'm seeing the same thing. I replaced the old syntax with the new syntax from the changelog but no animations are showing:

before:

card_mod:
  style: |
    mushroom-shape-icon { 
      {{ '--icon-animation: pulse 3s 0s infinite' }}
    }

after:

card_mod:
  style: |
    ha-state-icon {
      animation: spin infinite linear spin;
    }

[johannwilken]

Good day,

I saw with the latest update of mushroom cards there was a breaking change. Have you found a solution yet?

Thanx

[shlomosv1]

i have the same problem
new syntax does not solve the problem
no animation
please help !!!

[Hussamfhaily]

same here.
any solution?

[dnestico]

This code didn't do anything for me and I guess its like you said, maybe the mushroom chips just aren't supported, I thought they were cuz I saw something on the forums I think so idk. @piitaya

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: group.all_motion_sensor_entities
    icon_color: |-
      {% if is_state('group.all_motion_sensor_entities', 'on')
      %}                            
        green                    
      {% else %}
        disabled
      {% endif %}
    icon: |-
      {% if is_state('group.all_motion_sensor_entities', 'on')
      %}                            
        mdi:motion-sensor                         
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    tap_action:
      action: more-info
    card_mod:
      style: |
        ha-state-icon {
          animation: pulse 3s 0s infinite;
        }

[rahuljawale]

@dnestico mushroom chips are supported but the syntax is a bit different than regular mushroom cards. Here is the working syntax. The card_mod element must be added at the end for all chip cards.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: group.all_motion_sensor_entities
    icon_color: |-
      {% if is_state('group.all_motion_sensor_entities', 'on')
      %}                            
        green                    
      {% else %}
        disabled
      {% endif %}
    icon: |-
      {% if is_state('group.all_motion_sensor_entities', 'on')
      %}                            
        mdi:motion-sensor                         
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    tap_action:
      action: more-info
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: pulse 3s 0s infinite;
      }

Just increment the number in nth child to apply CSS to the nth chip icon. Hope this helps!

type: custom:mushroom-chips-card
chips:
  - type: template
    icon_color: red
    icon: mdi:washing-machine
    entity: sensor.washing_machine
  - type: template
    icon_color: red
    icon: mdi:tumble-dryer
    entity: sensor.trockner
  - type: template
    icon: mdi:fan
    icon_color: amber
    entity: sensor.washing_machine
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: shake 400ms ease-in-out infinite, drum 1s infinite;
        transform-origin: 50% 65%;
      }
      @keyframes shake {
        0%, 100% { transform: rotate(4deg); }
        50%  { transform: rotate(-4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        animation: rotation 1.5s linear infinite;
      }
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }      

[KJThaDon]

@dnestico mushroom chips are supported but the syntax is a bit different than regular mushroom cards. Here is the working syntax. The card_mod element must be added at the end for all chip cards.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: group.all_motion_sensor_entities
    icon_color: |-
      {% if is_state('group.all_motion_sensor_entities', 'on')
      %}                            
        green                    
      {% else %}
        disabled
      {% endif %}
    icon: |-
      {% if is_state('group.all_motion_sensor_entities', 'on')
      %}                            
        mdi:motion-sensor                         
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    tap_action:
      action: more-info
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: pulse 3s 0s infinite;
      }

Just increment the number in nth child to apply CSS to the nth chip icon. Hope this helps!

type: custom:mushroom-chips-card
chips:
  - type: template
    icon_color: red
    icon: mdi:washing-machine
    entity: sensor.washing_machine
  - type: template
    icon_color: red
    icon: mdi:tumble-dryer
    entity: sensor.trockner
  - type: template
    icon: mdi:fan
    icon_color: amber
    entity: sensor.washing_machine
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: shake 400ms ease-in-out infinite, drum 1s infinite;
        transform-origin: 50% 65%;
      }
      @keyframes shake {
        0%, 100% { transform: rotate(4deg); }
        50%  { transform: rotate(-4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        animation: rotation 1.5s linear infinite;
      }
      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }      

How are you supposed to combine it with any other styles?

Example:

    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-icon-size: 20px;
          margin-top: 4px;
          margin-right: 4px;
          --chip-border-width: 0px;
        }
        :host {
          background-color: rgba(var(--rgb-card-background-color), 0.75);
          bottom: 0px;
          left: 0px;
          right: 0px;
          height: 44px;
        }

    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
            animation: rotation 1.5s linear infinite;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }  

[nomailme]

animation for ha-state-icon doesn't work for me either

[ChapayTv]

Tell me how can I use two animations at once? It's just that the ping animation doesn't work correctly.

This is how I feel now.

bandicam.2023-11-11.08-19-21-892.mp4

But you need the rocket to move and the ping animation to be

bandicam.2023-11-11.08-23-32-362.mp4

type: custom:mushroom-template-card
icon: mdi:rocket-launch
icon_color: deep-orange
primary: Rocket Man
card_mod:
  style:
    mushroom-shape-icon: |
      ha-state-icon {
        animation: ping 2s infinite, thrust 100ms infinite;
      }
      @keyframes thrust {
        0% { clip-path: polygon(0 0, 0 47%, 22% 57%, 28% 63%, 0 91%, 11% 100%, 37% 73%, 45% 77%, 55% 100%, 100% 100%, 100% 0%); }
        33% { clip-path: polygon(0 0, 0 47%, 24% 59%, 42% 76%, 54% 100%, 100% 100%, 100% 0); }
        66% { clip-path: polygon(0 0, 0 92%, 28% 64%, 36% 72%, 9% 100%, 100% 100%, 100% 0%); }
      }
      @keyframes ping {
        0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-yellow), 0.3) inset; }
        50% { box-shadow: 0 0 5px 15px transparent inset; }