Animation in custom button card

Share your Projects! Dashboards & Frontend
1

Hi all
I use an door sensor to see if my robot lawn mover is “home” or away.
I am struckling with some animation in a custom-button-card. I want the icon the turn grey when the lawn mover is “away” and turn green when the lawn robot is home. and only when the robot is home the animation should run.
Hope it make sense

type: custom:button-card
icon: mdi:battery
entity: binary_sensor.buller_opening_5
name: Worx Landroid
primary: worx
icon_color: |-
{% if is_state(config.entity,‘on’) %}
green
{% else %}
gray
{% endif %}
extra_styles: |
ha-state-icon {
–icon-animation: {{ ‘charge 3s linear infinite;’ if is_state(config.entity, ‘on’) else ‘none’ }}
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}

2

Hi, I recommend to look at the developer’s documentation…

- type: custom:button-card
  icon: mdi:battery
  entity: binary_sensor.movement_backyard
  name: Worx Landroid
  primary: worx
  styles:
    icon:
      - color: >
          [[[
            if (entity.state === 'on') return 'green';
            return 'gray';
          ]]]
      - animation: >
          [[[
            if (entity.state === 'on') return 'charge 3s linear infinite;';
            return 'none';
          ]]]
  extra_styles: |
    @keyframes charge {
      0%, 80% { clip-path: inset(0 0 0 0); }
      10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
      20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
      30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
      40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
      50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
      60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
      70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
    }

battery

3

Hi VietNgoc
Thanks a lot for you help. Its working perfect.
I will look into the developers documentation
Br Martin