Bonjour,
Toujours débutant et toujours en train d’apprendre.
Je cherche à fusionner les 2 codes suivants pour avoir une animation de l’icône à chaque action sur la carte et le changement de couleur et de forme de l’icône comme suit :
- vert et fermé, lorsque le contact est ON
- rouge et ouvert , 10 secondes après ouverture du contact, qui devient OFF.
type: custom:mushroom-template-card
entity: switch.garage_petit_0xa4c138830e468980_state
tap_action:
action: toggle
icon_color: >
{% if
is_state('binary_sensor.garage_petit_0xa4c138830e468980_garage_door_contact','off')
%}
green
{% else %}
red
{% endif %}
icon: >
{% if
is_state('binary_sensor.garage_petit_0xa4c138830e468980_garage_door_contact','off')
%}
mdi:garage-variant
{% else %}
mdi:garage-open-variant
{% endif %}
fill_container: false
multiline_secondary: true
primary: "Petit Garage "
secondary: >-
{% if
is_state('binary_sensor.garage_petit_0xa4c138830e468980_garage_door_contact','off')
%}
Fermé
{% else %}
Ouvert
{% endif %}
badge_icon: ""
layout: horizontal
type: custom:mushroom-template-card
primary: Garage
icon: mdi:garage-variant
entity: switch.garage_petit_0xa4c138830e468980_state
icon_color: amber
card_mod:
style: |
ha-state-icon {
{% if states('switch.garage_petit_0xa4c138830e468980_state') == 'open' %}
clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0);
animation: open 3s;
{% else %}
clip-path: inset(0 0 0 0);
animation: close 3s;
{% endif %}
} @keyframes open {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
} @keyframes close {
0% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: inset(0 0 0 0); }
}
En vous remerciant d’avance pour votre aide.
Christophe.