Why does this simple animation not work

Share your Projects! Dashboards & Frontend
1

if i apply it to the outer element it works, but who wants a complete map that rotates. it should only rotate the icon. where is my thinking error. have never dealt with animation in home assitant before. am grateful for any help.

type: custom:mushroom-template-card
primary: Heizung
secondary: ''
icon: mdi:fan
icon_color: blue
layout: vertical
tap_action:
  action: navigate
  navigation_path: heizprofile
card_mod:
  style: |
    @keyframes rotation {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }
    ha-icon {
      animation: rotation 3s linear infinite;
    }
2

Did you get it to work?

This should do the trick:

type: custom:mushroom-template-card
primary: Heizung
secondary: ''
icon: mdi:fan
icon_color: blue
layout: vertical
tap_action:
  action: navigate
  navigation_path: heizprofile
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 3s linear infinite;
      }
3

wow, thank you. i would not have thought of it that way. :slight_smile: