Picture-elements image blinking with state

Configuration Frontend
1

Hello, can someone help me how to get the images ‘Kunststoff.png’, ‘Rest.png’ and ‘Bio.png’ to flash when the value is ‘today’? I’ve tried it before but it didn’t work.

With this code:

    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          animation:
            {% if states('sensor.abfallbio') == 'Heute' -%} 
              blink 1.5s linear infinite;
            {% else -%} none
            {% endif %}
        }
        @keyframes blink {
          from {opacity: 100;}
          to {opacity: 0;}
          from {opacity: 0;}
          to {opacity: 100;}
        }

Complete code:

type: picture-elements
image: /local/muell/Back_trans.png
elements:
  - type: image
    entity: sensor.abfallgelbersack
    image: /local/muell/Kunststoff.png
    style:
      pointer-events: none
      left: 20%
      top: 20%
      width: 15%
  - type: image
    entity: sensor.abfallrestmuell
    image: /local/muell/Rest.png
    style:
      pointer-events: none
      left: 50%
      top: 20%
      width: 15%
  - type: image
    entity: sensor.abfallbio
    image: /local/muell/Bio.png
    style:
      pointer-events: none
      left: 80%
      top: 20%
      width: 15%
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          animation:
            {% if states('sensor.abfallbio') == 'Heute' -%} 
              blink 1.5s linear infinite;
            {% else -%} none
            {% endif %}
        }
        @keyframes blink {
          from {opacity: 100;}
          to {opacity: 0;}
          from {opacity: 0;}
          to {opacity: 100;}
        }
  - type: custom:button-card
    entity: sensor.abfallgelbersack
    name: GelberSack
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 45%
      left: 20%
      width: 25%
    styles:
      name:
        - font-size: 0.6vw
        - font-family: Arial Rounded MT
        - color: var(--primary-color)
      state:
        - font-size: 0.6vw
        - font-family: Arial Rounded MT
        - padding-top: 0.3em
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.abfallrestmuell
    name: Restmüll
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 45%
      left: 50%
      width: 25%
    styles:
      name:
        - font-size: 0.6vw
        - font-family: Arial Rounded MT
        - color: var(--primary-color)
      state:
        - font-size: 0.6vw
        - font-family: Arial Rounded MT
        - padding-top: 0.3em
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.abfallbio
    name: Bio
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 45%
      left: 80%
      width: 25%
    styles:
      name:
        - font-size: 0.6vw
        - font-family: Arial Rounded MT
        - color: var(--primary-color)
      state:
        - font-size: 0.6vw
        - font-family: Arial Rounded MT
        - padding-top: 0.3em
      card:
        - background-color: transparent
        - border: none
card_mod:
  style: |
    ha-card { 
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    margin-top: 20px;
    height: 150px !important;
    }

Thank you very much