Blinking Icon

Configuration Frontend
1

What is wrong with this code ?

                    card_mod:
                      style: |
                        ha-card$: |
                          .blink-icon {
                            {% if is_state('sensor.veluxraamlinks_status','moving')%}
                            animation: blink 2s linear infinite; 
                            {% endif %}
                          }
                          @keyframes blink {
                            0% { opacity: 1; }
                            50% { opacity: 0; }
                            100% { opacity: 1; }
                          }

w

2

It probably depends on the card that you’re trying to animate. This works for a Mushroom Template card:

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: rotation 2s linear infinite
      }
      @keyframes rotation {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }

While this works for a custom:button-card:

styles:
  icon:
    - animation: blink 1s linear infinite

or

styles:
  icon:
    - animation:
      - rock 3s linear infinite
extra_styles: |
  @keyframes rock {
    0% {transform: rotatez(15deg)}
    25% {transform: rotatez(30deg)}
    50% {transform: rotatez(15deg)}
    75% {transform: rotatez(0deg)}
    100% {transform: rotatez(15deg)}}
2 Likes
3

I’m trying to get this to work with a mushroom chip template card.
It’s supposed to flash the shield icon when arming.
However, I’m having a very hard time getting it to work.

here’s my code, could you tell me what I’m doing wrong?

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: alarm_control_panel.inbraakbeveiliging
    icon: |-
      {% if is_state('alarm_control_panel.inbraakbeveiliging', 'armed_home') %}
        mdi:shield-home
      {% elif is_state('alarm_control_panel.inbraakbeveiliging', 'armed_way') %}
        mdi:shield
      {% elif is_state('alarm_control_panel.inbraakbeveiliging', 'disarmed') %}
        mdi:shield-off
      {% elif is_state('alarm_control_panel.inbraakbeveiliging', 'arming') %}
        mdi:shield
      {% endif %}
    icon_color: |-
      {% if is_state('alarm_control_panel.inbraakbeveiliging', 'armed_home') %}
        red
      {% elif is_state('alarm_control_panel.inbraakbeveiliging', 'armed_way') %}
        red
      {% elif is_state('alarm_control_panel.inbraakbeveiliging', 'disarmed') %}
        green
      {% elif is_state('alarm_control_panel.inbraakbeveiliging', 'arming') %}
        yellow
      {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: rotation 1s linear infinite
          }
          @keyframes rotation {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
          .shape {
            --shape-animation: ping 2s infinite;
          }
          @keyframes ping {
            60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
    content: ''
alignment: center

Thanks in advance,

4

Dag Anton,

            #koelkast: bij open gaat icoon pinken         
                  - type: template
                    entity: binary_sensor.deursensor_koelkast_contact
                    icon: |-
                      {{ iif(is_state(entity, 'on'), 'mdi:fridge-alert', 'mdi:fridge') }}
                    icon_color: |-
                      {{ iif(is_state(entity, 'on'), 'yellow', '[36,36,36]') }}                      
                    tap_action:
                      action:   
                    hold_action:
                      action: ""
                    card_mod:
                      style: |
                        ha-card {
                          {% if is_state('binary_sensor.deursensor_koelkast_contact','on') %}
                          animation: blink 0.4s linear infinite;
                          }
                          @keyframes blink {
                            50% {opacity: 0;}
                            }
                          {%- else -%}
                          box-shadow: 0px 0px;
                          {%- endif %}
                        ha-card {
                          box-shadow: 0px 0px;

This is what I have running…

2 Likes
5

Bedankt voor de hulp, dit werkt perfect.
Het issue was niet de code, maar ik had card-mod niet geïnstalleerd :man_facepalming:.

Thanks for the help, this works flawlessly
The issue was not my code, but I hadn’t installed card-mod :man_facepalming:.

6

I was able to reduce the statement considerably as follows:

card_mod:
  style: |
    {% if is_state('group.any_door_or_window_open','on') %}
      ha-card { animation: blink 1s linear infinite; }
      @keyframes blink { 50% {opacity: 0;} }
    {%- endif %}
2 Likes