I’m trying to add an animation to the native badges. The animation code works in cards but I can’t get it to work in badges. I’ve can’t figure out the element to select it seems. Any help would be appreciated.
Here’s the badge YAML, the animation part works in cards but not this badge.
type: entity
show_name: false
show_state: true
show_icon: true
entity: sensor.dishwasher_current_status
color: ""
visibility:
- condition: state
entity: sensor.dishwasher_current_status
state_not: power_off
- condition: state
entity: sensor.dishwasher_current_status
state_not: power_fail
- condition: state
entity: sensor.dishwasher_current_status
state_not: cancel
- condition: state
entity: sensor.dishwasher_current_status
state_not: initial
- condition: state
entity: sensor.dishwasher_current_status
state_not: unavailable
- condition: state
entity: sensor.dishwasher_current_status
state_not: unknown
state_content:
- state
- last_changed
tap_action:
action: none
card_mod:
style: |
ha-state-icon {
animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}