Change animation with entity state

[bladecell]

I want to have light card and while toggling it it should transition the backround from state on backround to state off backround
This is what I have came up with, but the animation doesnt change, only when I open the card editor and then close it, but the animation locks again. Do you have any idea how to improve this?

type: custom:button-card
name: Toilet
show_label: true
show_state: false
entity: light.toilet_lights
triggers_update: all
label: |
  [[[
    return getTimeDifference(entity.last_changed)  + ' • ' + capitalizeFirstLetter(entity.state);
    
    function getTimeDifference(lastChangedTime) {
      const now = new Date();
      const lastChanged = new Date(lastChangedTime);
      const diffInMilliseconds = now - lastChanged;
      
      const minutes = Math.floor(diffInMilliseconds / 60000);
      const hours = Math.floor(minutes / 60);
      const days = Math.floor(hours / 24);
      
      if (days > 0) {
        return `${days} ${days === 1 ? 'day' : 'days'} ago`;
      } else if (hours > 0) {
        return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
      } else if (minutes > 0) {
        return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;
      } else {
        return 'just now';
      }
    }
    
    function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
  ]]]
tap_action:
  action: toggle
hold_action:
  action: more-info
state:
  - value: 'on'
    styles:
      card:
        - animation: gradient 2s ease-out 0s 1 normal forwards;
  - value: 'off'
    styles:
      card:
        - animation: gradient 2s ease-out 0s 1 reverse forwards;
styles:
  card:
    - background: >-
        linear-gradient(50deg, rgba(45,45,45,1) 0%, rgba(162,162,162,1) 40%,
        rgba(200,156,0,1) 60%, rgba(255,252,196,1) 100%);
    - background-size: 400% 400%;
    - padding: 18px
  grid:
    - grid-template-areas: '"i" "n" "l"'
    - grid-template-rows: 1fr min-content min-content
    - grid-template-columns: 1fr
  label:
    - justify-self: start
    - font-size: 14px
    - font-weight: 300
    - line-height: 16px
  icon:
    - width: 24px
    - color: rgba(45,45,45,1)
  img_cell:
    - justify-self: end
    - width: 30px
    - height: 30px
  name:
    - justify-self: start
    - font-size: 20px
    - line-height: 40px
    - font-weight: 600
extra_styles: |
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }