animated-mushroom-chip

- type: custom:mushroom-chips-card
  chips:
    - type: template
      entity: sensor.garage_power_power
      icon_color: |
        {% if states(entity) | int(0) < 500 %}
          green
        {% elif states(entity) | int(0) < 1000 %}
          orange
        {% else %}
          red
        {% endif %}
      icon: mdi:lightning-bolt
      content: '{{ states(entity) | int(0) ~ ''W'' }}'
      tap_action:
        action: navigate
        navigation_path: ./power
  card_mod:
    style:
      mushroom-template-chip:nth-child(1)$: |
        ha-state-icon {
          {% set power = states('sensor.garage_power_power') | int(0) %}
          {% if power >= 500 and power < 1000 %}
            animation: shake 600ms ease-in-out infinite;
            transform-origin: 50% 110%;
          {% elif power >= 1000 %}
            animation: shake 300ms ease-in-out infinite;
            transform-origin: 50% 110%;
          {% endif %}
        }
        @keyframes shake {
          0%, 100% { transform: translate(0, 0) rotate(0); }
          20%  { transform: translate(1.4px, -1.4px) rotate(-8deg); }
          40%  { transform: translate(-1.4px, 1.4px) rotate(8deg); }
          60%  { transform: translate(1.4px, 1.4px) rotate(-8deg); }
          80%  { transform: translate(-1.4px, -1.4px) rotate(8deg); }
        }