Animate a picture inside a picture elements card

Configuration Frontend
1

Im trying to use a blinking effect for a specific image inside a picture elements card. I already have a working card_mod part where the picture uses an input_boolean for the opacity but the animation won’t work.
Is there any way for it?

Here the yaml from my dashboard

- type: image
  card_mod:
    style: |
      hui-image {
        {% if is_state('input_boolean.dummy_xyz', 'on') %}
          opacity: 1;
          animation: fade 1.5s ease-in-out infinite;
        {% else %}
          opacity: 0;
        {% endif %}
        @keyframes fade
          0% { opacity: 1; }
          50% { opacity: 1; }
          10% { opacity: 1; }
          image:
            media_content_id: /local/folder_x/folder_y/picture_z.png
          style:
            left: 72.85%
            top: 69.35%
            width: 2.25%
            rotate: '-16.8deg'
2

It cannot be called “working” since it is wrong(.
Besides, indentation is broken.

You are missing “keyframes” options.
Check for other examples for animation: main card-mod thread - 1st post - link at the bottom - Entities card - animation

3

I accidentally forgot to copy the @keyframes fade line. And changing the opacity of the image with the input_boolean is working.

I checked nearly every post with card_mod, styling etc that’s why I created a extra topic because I can’t figuere it out

4

The updated code is still wrong - no closing bracket, broken indentation.

No need to check “any”, check proven ones - use a path to examples which I suggested.
Take this as a schema:

      @keyframes abc {
        xxx {...}
        yyy {...}
      }
2 Likes
5 
            card_mod:
              style: |
                hui-image {
                  {% if is_state('input_boolean.betriebsrestaurant_dummy_storung', 'on') %}
                    opacity: 1;
                    animation: fade 1.5s ease-in-out infinite;
                  {% else %}
                    opacity: 0;
                  {% endif %}
                }
                  @keyframes fade {
                    0% { opacity: 1; }
                    50% { opacity: 0; }
                    100% { opacity: 1; }
                  }

I shut my mou…

Yes sometimes it needs a second person to see things I oversee…
Thank you :sweat_smile:

6

Too little of morning coffee)))
Best wishes!

1 Like