How to animate state-icon inside picture-elements

Configuration Frontend
1

Hi, guys.
What I want to do is animate more than one “- type” thing inside picture-elements.

type: picture-elements
image: /local/kit.jpg
style: |
  ha-card {
    {% if is_state('fan.ventilador_socket_1','on') %}
    --state-color: #FDD835;
    --state-animation: rotation 2s linear infinite;
    {% else %}
    --state-color: #44739E;
    {% endif %}
    }
  @keyframes rotation {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
    }
elements:
  - type: image
    entity: light.luz_da_cozinha
    state_image:
      'on': /local/kit.jpg
      'off': /local/Kitoff.jpg
    state_filter:
      'on': brightness(120%) saturate(1.9)
    style:
      top: 50%
      left: 50%
      width: 100%
      background-color: rgba(0,255,0,1)
    tap_action:
      action: toggle
  - type: state-icon
    state_color: true
    entity: fan.ventilador_socket_1
    icon: mdi:fan
    style:
      top: 63%
      left: 36%
      transform: translate(0,0)
      position: absolute
      '--paper-item-icon-color': var(--state-color)
      animation: var(--state-animation)
  - type: state-icon
    entity: light.luz_da_cozinha
    state_color: true
    icon: mdi:lightbulb
    style:
      top: 63%
      left: 46%
      transform: translate(0,0)
      position: absolute
      '--paper-item-icon-color': rgb(55,25,55)

I want to create a animation for the third element (light entity). Blink, or something when is on.

Any help?

Actual:

Media_230714_012910

2

I also wanted to decrease the size of the card. Is there an easier method to create what I’m wanting? The idea is a pic of the room that turns black and white when I click on it indicates what the light was also turned off. And other elements underneath, animated.

3

If you’re able to get the rotation working with the keyframes “transform: rotate(0deg)” and “transform: rotate(360deg)” then I would guess that copying that and using “filter: brightness(0.0)” and “filter:brightness(1.0)” or something similar would give you the pulsing on-and-off. (But I haven’t tried.)

4

Thank you. This code is copy paste from google. Where would I put this part of the code?

5

You’d have to figure out which part of the code is doing what. It looks like the part with the “rotate” words is rotating the item. Keyframes are an animation term for key points in the animation, so those would define the rotation at different times. You would need to replace those with the brightness changes you want so instead of rotating at those times in the animation it would adjust the brightness. If that’s not enough to help you figure out which parts to change, then you’ll have to start looking at some CSS tutorials to figure it out, I’m afraid.

1 Like