Combining card mod and animations

Configuration Frontend
1

Hi!

I had some animations in my Mushroom dashboards previously, but these stopped working some time ago after an upgrade. I’m now looking into making them work again. One of the challanges is that I use card mod on the same cards where i want the icons and so on to be animated.

One example is the media icon here:
image

I have tried to change the code to make it work, so this is no longer the same code that previously did work on earlier versions. Anyone see what’s wrong here?

  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-state-icon {
          {{ ' --icon-animation: beat 1.3s ease-out infinite both; ' if
          is_state('media_player.bathroom_speaker' , 'off') }}
          
          transform-origin: 50% 80%;
           }
              @keyframes beat {
                0% { transform: scale(1); }
                10% { transform: scale(1.1); }
                17% { transform: scale(1.05); }
                33% { transform: scale(1.30); }
                60% { transform: scale(1); }
           }
          ha-card {
          --card-mod-icon-color: #ccba83;
          border: 0px solid white;
          background-color: #30302f;
           }
    primary: Media
    secondary: ''
    icon: mdi:music
    icon_color: brown
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobil/media
    double_tap_action:
      action: none
    hold_action:
      action: none