Icon in Rollladen Card animieren?

Dashboard/Cards/Frontend
1

Hallo zusammen,
bin erst einige Tage dabei und komme noch nicht wirklich mit yaml klar.
Ich hab zwar einiges zu animierten Icons gefunden, aber wenn ich versuche es irgendwie in eine card zu integrieren komm ich ganz schnell an meine Grenzen…

Im Grunde möchte ich nur, dass das Icon der Rollladen card animiert ist. Ein einfaches blinken bekomme ich aber nicht zustande.

Wäre für jeden Code-Schnipsel dankbar! :grinning:

2

Hallo
Hier ist mal ein Beispiel von mir, bei dem das Icon blinkt, sobald ein Fenster oder Tür geöffnet/offen steht.

type: custom:mushroom-template-card
primary: Fenster
secondary: >
  {% set last_changed = states.input_boolean.fenster_im_haus_offen.last_changed
  %}

  {% set time_difference = as_timestamp(now()) - as_timestamp(last_changed) %}

  {% if time_difference < 3600 %}
    Vor {{ (time_difference // 60) | round(0, 'floor') }} Min
  {% else %}
    {% set hours = ((time_difference // 60) // 60) | round(0, 'floor') %}
    {% set minutes = ((time_difference // 60) % 60) | round(0, 'floor') %}
    Vor {{ hours }} Std und {{ minutes }} Min
  {% endif %}
icon: |-
  {% if is_state('input_boolean.fenster_im_haus_offen', 'off') %}
    mdi:window-closed-variant
  {% elif is_state('input_boolean.fenster_im_haus_offen', 'on') %}
    mdi:window-open-variant
  {% endif %}
layout: vertical
badge_color: ''
badge_icon: ''
icon_color: null
hold_action:
  action: none
double_tap_action:
  action: none
tap_action:
  action: navigate
  navigation_path: /lovelace/rolladen
entity: input_boolean.fenster_im_haus_offen
card_mod:
  style: |

    {% if is_state('input_boolean.fenster_im_haus_offen', 'on') %}

      ha-card { 
        --ha-card-border-radius: 10px; 
        --ha-card-border-color: red;
        --ha-card-border-width: 1px; 
        --card-mod-icon-color: white;
        --card-primary-font-size: 16px;
        
        mushroom-shape-icon { 
          --shape-color: red !important;
          --shape-color-disabled: none !important;}
      }
       
          mushroom-shape-icon {
            animation: blink 2s linear infinite;
       }

      @keyframes blink {
        50% {opacity: 0;}
      }

    {% else %}

      ha-card { 
        --ha-card-border-radius: 10px; 
        --ha-card-border-color: green;
        --ha-card-border-width: 1px; 
        --card-mod-icon-color: white;

        mushroom-shape-icon { 
          --shape-color: green !important;
          --shape-color-disabled: none !important;}
      }                    
    {% endif %}

Die Entitäten input_boolean.fenster_im_haus_offen musst du natürlich auf deine anpassen!

1 „Gefällt mir“