Animer un icône pendant une durée déterminée

Problème réglé pour ma part par les scripts déjà créé qui écrient l’état de ma porte de garage dans un input_text
J’ai pu via le script écrire un premier état de mouvement et indiquer le temps (30 secondes) à attendre pour écrire l’état final
Ensuite j’ai rajouté dans le code de ma carte les mouvement intermédiaire

type: custom:button-card
entity: input_text.etat_porte_garage
name: Garage
icon: |
  [[[
    if (states['input_text.etat_porte_garage'].state == 'Fermé')
      return 'mdi:garage';
    else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
      return 'mdi:garage-open';
    else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
      return 'mdi:garage-alert';
    else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
      return 'mdi:garage-alert';
  ]]]
show_label: true
label: |
  [[[
    if (states['input_text.etat_porte_garage'].state == 'Fermé')
      return '<font color= "green"><b>Fermé</font>';
    else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
      return '<font color= "red"><b>Ouvert</font>';
    else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
      return '<font color= "orange"><b>Fermeture</font>';
    else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
      return '<font color= "orange"><b>Ouverture</font>';
  ]]]
aspect_ratio: 3/1
styles:
  name:
    - font-size: 0.9em
    - justify-self: middle
    - align-self: end
  card:
    - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
    - border: 2px rgba(211,211,211,1.0) outset
  icon:
    - border-radius: 50%
    - border: none
    - box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
    - box-shadow: |
        [[[
          if (states['input_text.etat_porte_garage'].state == 'Fermé')
            return '0px 0px 5px 5px rgba(0,128,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
            return '0px 0px 5px 5px rgba(255,0,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
        ]]]
    - background-color: |
        [[[
          if (states['input_text.etat_porte_garage'].state == 'Fermé')
            return 'rgba(0,128,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
            return 'rgba(255,0,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
            return 'rgba(255,140,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
            return 'rgba(255,140,0,0.5)';
        ]]]
    - width: 60px
    - height: 60px
    - color: |
        [[[
          if (states['input_text.etat_porte_garage'].state == 'Fermé')
            return 'rgba(0,255,0,1.0)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouvert')
            return 'rgba(255,0,0,1.05)';
          else if (states['input_text.etat_porte_garage'].state == 'Fermeture')
            return 'rgba(255,140,0,0.5)';
          else if (states['input_text.etat_porte_garage'].state == 'Ouverture')
            return 'rgba(255,140,0,0.5)';
        ]]]
tap_action:
  action: call-service
  service: script.portail_fermer
hold_action:
  action: call-service
  service: script.portail_ouvert