Image blink animation when entity state changes

Configuration Frontend
1

Hello,
I have created custom sensors which are referencing local calendar events, and I was able to create dashboard with garbage collecting schedule.
My sensor gets 3 states

0 - when it’s takeout day
1 - day before takeout day
2 - every other day

I was able to bind different images depending on sensor stare using state_image. My problem is, I would like to make image blink when sensor stare is 1 (day before takeout). Here is my dashboard code for one of bins, rest is redundant:

type: custom:config-template-card
entities:
  - sensor.bio_days
variables:
  DAYS: states['sensor.bio_days'].attributes['days']+'d'
card:
  type: picture-entity
  entity: sensor.bio_days
  name: ${DAYS}
  show_name: true
  show_state: false
  state_image:
    '0': /local/images/smieci/kosz_bio_state0.png
    '1': /local/images/smieci/kosz_bio_state1.png
    '2': /local/images/smieci/kosz_bio_state2.png

This is how it looks like:
image

As you can see name is set to show days left, and I also would want to do blinking animation, but have no idea how to do it. I tried styling suggested here:

but with no success.

2

:thinking:

  ...
  state_image:
    '0': /local/images/smieci/kosz_bio_state0.png
    '1': /local/images/smieci/kosz_bio_state1.png
    '2': /local/images/smieci/kosz_bio_state2.png
  animation: >
    if (state === '1') return 'blink 1s infinite';
    return 'none';
3

This option is not supported in Picture entity card.

4

Answer is same as it was given in the thread (your link) - card-mod.
Or replace picture-entity card inside config-template-card by a custom:button-card and try using it’s native css styling options.

5

Hello
Thanks for your answer, indeed solution suggested by krskrab does not work.
Unfortunately I can’t seem to make it using card mod, would you be able to help please? I’m not sure where should I put the animation call and how to bind it to specific state

6

All card-mod related questions better to ask in the dedicated thread. You will probably get answers faster & card-mod solutions will be gathered in 1 place.

7

Thank you, I got answer under card-mod thread.
For anyone wondering how to make image blink based on state, here is code that worked for me, I adjusted code provided by Mariusthvdb under card-mod thread

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