How to animate a image inside a picture-elements card?

Configuration Frontend
1

Hi all!
I’m trying to show a blinking warning notification when a binary sensor is active using an image inside a picture elements. I have the code below but it doesn’t work. Does anyone know how to do it?

type: picture-elements
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
elements:
  - type: image
    entity: binary_sensor.alarm
    style:
      top: 35%
      left: 49%
      animation: blink 2s linear infinite

    state_image:
      'on': /local/images/icon-alert.png
2

blink is not a keyword. It’s a @keyframes element that must be injected in the css somehow.
Do you do so?

See, e.g., css - how to make a blinking image in CSS3 - Stack Overflow

3

Thanks for your answer. I understand that I have to use some code like the following:

  @keyframes blink {
    from {opacity: 0;}
    to {opacity: 100;}
  }
  ha-card {
  animation: blink 2s linear infinite;
  }

But, how do I have to insert it in the picture-elements code?

4

Finally I got it to work!.

type: picture-elements
elements:
  - type: image
    entity: input_boolean.prueba_1
    style:
      top: 35%
      left: 49%
      animation: my-blink 1s linear infinite
    state_image:
      'on': /local/images/icon-alert3.png

image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
style: |

  @keyframes my-blink {
    from {opacity: 0;}
    to {opacity: 100;}
    from {opacity: 100;}
    to {opacity: 0;}
  }
5 Likes
5

Cool! Do you know how to do the blink animation but only when the entity is on?

6

I used for a smoother animation


style: |

  @keyframes my-blink {
    0% {opacity: 0;}
    50% {opacity: 100;}
    100% {opacity: 0;}
  }

And put this state_image in


- type: image
    entity: sensor.yoursensor
    state_image:
      on: /local/img/yourimage.jpg
    style:
      left: 0%
      top: 0%
      width: 100%
      transform: scale(1,1)
      animation: my-blink 2s linear infinite
3 Likes
8

looks cool! Any idea on how to animate only when state = on?

9

That is what I does.

You have two elements:
a) a regular image put in via

image: /local/img/your_image.jpg

This is not animated and kind of in the background.

b) an altered version of that image that is only shown when something is “on” (state_image).
That is the code I did show before. The animation is being added under “style” and in that case isis blending both image back and forth.

My example:
I use it to show if an electric car is being charged. As a base image I have a side view of that car. It is just a still image with no animation or anything else. When the car is being charged (the “on” part) then I use a modified picture with some blue/red blur around the car. The blend animation gives the impression as if the outline car is pulsing. In addition certain other information are being shown on top of that car, but only if the charging is “on” (for simplicity this is not shown in the code above)

10

Card-mod is the only way.