Picture-elements smooth change of light intensity/brightness

Configuration Frontend
1

Hello everyone,
I am working on a smooth change of light intensity. I have already added an animation of elements, but I do not know how to initiate the animation at the moment of brightness change, so that it takes place once from the initial brightness level to the one at which it was changed.

I use card_mod and try to avoid Config Template Card Card because sometimes it causes flickering when changing color or brightness.

type: picture-elements
elements:
  - type: image
    entity: light.tasma_led_kuchnia
    style:
      left: 50%
      top: 50%
      width: 100%
      mix-blend-mode: lighten
      animation: my-blink 1s linear infinite
    state_image:
      "on": local/images/floorplan/alfa_night/5_comp.png?v=1
      "off": local/images/floorplan/alfa_night/transparent.png?v=1
    card_mod:
      style: |
        :host {
        }
          @keyframes my-blink {
            0% {opacity: 0;}
            100% {opacity: {{ (state_attr(config.entity, 'brightness') / 255) if is_state(config.entity, 'on') else 0.0 }};}

        }

I left “infinite” in the code to show that the effect works.

I tried to store the previous value in the helper and use ‘from’ ‘to’ in @keframes but I don’t know how to trigger animation when the brightness level changes.

Regards