Monitor animation

Configuration Frontend
1 
type: custom:mushroom-template-card
layout: vertical
entity: media_player.engel_4k_android_tv_2
icon: mdi:television
icon_color: |-
  {% if is_state('media_player.engel_4k_android_tv_2', 'on') %}
    orange
  {% else %}
  {% endif %}
primary: Тv
secondary: '{{ states(''media_player.engel_4k_android_tv_2'') }} '
tap_action:
  action: toggle
  double_action:
    action: none
    hold_action:
      action: more-info
    vertical: true
    card_mod:
      style: |
        ha-card {
          border: none !important;
        }
        ha-state-icon:before {
         --animation: refresh 300ms linear infinite;
        }
        @keyframes refresh { 
          0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
          25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
          50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
          75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
         100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
        }
2

code not work

3 
- type: custom:mushroom-template-card
            primary: TV
            secondary: '{{ states ("media_player.engel_4k_android_tv_2")}}'
            icon_color: none
            icon: mdi:television
            entity: media_player.engel_4k_android_tv_2
            tap_action:
              action: toggle
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    {% if is_state(config.entity, 'on') %}
                      {% if state_attr(config.entity, 'rgb_color') == none %}
                        --icon-color: yellow !important;
                        --shape-color: rgba(255, 190, 137, 0.2) !important;
                        
                      {% else %}
                        
                        {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                        {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                        {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                        --icon-color: rgb({{ r }}, {{ g }}, {{ b }}) !important;
                        --shape-color: rgba({{ r }}, {{ g }}, {{ b }}, 0.2) !important;
                       {% endif %}
                    {% endif %}

                     }
                mushroom-state-info$: |
                  .container {
                    {% if is_state('media_player.engel_4k_android_tv_2', 'on') %}
                      --primary-text-color: Yellow;
                      --secondary-text-color: Yellow;
                    {% else %}
                      --primary-text-color: with;
                      --secondary-text-color: gray;
                    {% endif %}
                     }
                style: |
                  ha-state-icon {
                     {{ 'animation: refresh 2s infinite;' if is_state(media_player.engel_4k_android_tv_2'', 'on') }}
                     
                         }
                  @keyframes refresh { 
                    0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
                     25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
                     50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
                     75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
                    100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
                      }
4

Can I ask where your code is coming from? There have been several nomenclature changes from the time this code worked.

The code without your IF statements, proper formatting and nomenclature changes.

chrome-capture-2024-4-9 (1)

type: custom:mushroom-template-card
primary: TV
secondary: '{{ states ("media_player.engel_4k_android_tv_2")}}'
icon_color: yellow
icon: mdi:television
entity: media_player.engel_4k_android_tv_2
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
          background: rgba(255, 190, 137, 0.2) !important;
          --icon-symbol-size: 30px;
         }
    mushroom-state-info$: |
      .container {
          --card-primary-color: yellow;
          --card-secondary-color: yellow;
              }
    .: |
      ha-state-icon {
      animation: refresh 2s infinite;
             }
      @keyframes refresh { 
                    0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
                     25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
                     50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
                     75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
                    100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
                      }

Here is a guide that will assist you.

Post your questions here.