Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

Share your Projects!
,
10290

I have made many many posts about the updates to the animations that now happend roughly 6 months ago.

ill do it 1 more time, but after this, if someone asks about why their animations arent working and they are using the old path to the icon. i will not be replying.

ha-icon was moved out of the shadow root of mushroom-shape-icon$:.

ha-icon was renamed to ha-state-icon for consistency with native cards.

--icon-animation was removed and replaced with just animation to avoid confusion.

--shape-animation still exists so that you can animate the shape around the icon.

so for your specific code it would be:

card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, wind 5s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes wind {
      0%, 50%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: inset(0 0 37% 0); }
    }

I also updated all of the animations long ago now already: