Hey guys,
I want to animate the icon of my washing machine. But I struggle to get the the icon in the mushroom-chips-card animated. A normal icon animation works but not in the chip card.
I figured out, that I need a selector: mushroom-conditional-chip:nth-child(2): but that doesn’t work either.
Can somebody help me?
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.myname
- type: conditional
conditions:
- condition: state
entity: switch.shelly_waschmaschine
state: "on"
chip:
type: template
icon: mdi:washing-machine
card_mod:
style:
mushroom-conditional-chip:nth-child(2): |
ha-state-icon {
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}