Mushroom Card Animation Help

Configuration Frontend
1

What the heck am I missing? I can’t get this to work!! I have card_mod. Am I missing something else?


type: custom:mushroom-template-card
primary: Backyard Main
secondary: ""
icon: mdi:sprinkler
entity: switch.back_yard_main_zone
icon_color: blue
multiline_secondary: true
fill_container: false
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon { 
        --icon-animation: sprinkle 2s linear infinite;
        transform-origin: 29% 88%; 
      }
      @keyframes sprinkle {
        0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
        1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
        6%, 21%, 36%, 51% { transform: rotate(2deg); }
      }
2

This method will work.

card_mod:
  style: |
      ha-state-icon { 
        animation: sprinkle 2s linear infinite;
        transform-origin: 29% 88%; 
      }
      @keyframes sprinkle {
        0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
        1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
        6%, 21%, 36%, 51% { transform: rotate(2deg); }
      }
1 Like
3

Wow! Thank you. Three days final gave up searching! Is there a way to do it where it only animates if on?

4

Yes sir!

card_mod:
  style: |
    ha-state-icon { 
      animation:{{ 'sprinkle 2s linear infinite' if is_state(config.entity, 'on') else 'none' }};
      transform-origin: 29% 88%; 
    }
    @keyframes sprinkle {
      0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
      1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
      6%, 21%, 36%, 51% { transform: rotate(2deg); }
    }
2 Likes
5

You’re awesome, thank you!