CSS styling for different states

Configuration Frontend
,
1

Use case is to 1) have the icon change, as well as the color and 2) change animation depending on the state

So far I’m able to achieve the color and icon change - however, the animations are the struggle. Below you’ll see the ‘wobbling’ works fine, however, I’d like to also have a different keyframe animation to move to ‘pulse’ as an example when it’s raining.

type: custom:mushroom-template-card
icon: |-
  {% if states('weather.'x') == 'cloudy' %}
   mdi:weather-pouring
    {% else %} mdi:weather-sunny
    {% endif %} 
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 5s infinite;
      }
      @keyframes ping {
          0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
          70% {box-shadow: 0 0 0 10px transparent;}
          100% {box-shadow: 0 0 0 0 transparent;}
      }   
    .: |
      ha-card {
        width: 60px;
        margin-left: 175px;
         }     
    ha-state-icon: >
      ha-state-icon {
      {% if states('weather.'x'') == 'partlycloudy' %} color: yellow;{% else
      %} color: green {% endif %} ;
        animation: wobbling 10s linear infinite alternate;
      }

      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }

Thanks in advance!

2

Found the solution - the animation needs to be after the corresponding if statement:

type: custom:mushroom-template-card
icon: |-
  {% if states('weather.'x') == 'cloudy' %}
   mdi:weather-pouring
    {% else %} mdi:weather-sunny
    {% endif %} 
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 5s infinite;
      }
      @keyframes ping {
          0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
          70% {box-shadow: 0 0 0 10px transparent;}
          100% {box-shadow: 0 0 0 0 transparent;}
      }   
    .: |
      ha-card {
        width: 60px;
        margin-left: 175px;
         }     
    ha-state-icon: >
      ha-state-icon {
      {% if states('weather.'x'') == 'partlycloudy' %} color: yellow; [u]**animation: wobbling 10s linear infinite alternate**[/u];{% else
      %} color: green {% endif %} ;
      }
      @keyframes wobbling {
        0% {transform: rotate(-80deg);}
        100% {transform: rotate(40deg);}
      }