Again, please ONLY like the original posts by @rhysb here i have only updated some animations that needed updating.
Mushroom Animations 
- Part 4
Even More Mushroom Card Icon Animations
HA Animation (changed)
type: custom:mushroom-template-card
icon: mdi:home-assistant
icon_color: blue
primary: Home Assistant
card_mod:
style: |
ha-state-icon {
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
Surprise Animation (changed)
type: custom:mushroom-template-card
icon: mdi:gift
icon_color: deep-orange
primary: Surprise
card_mod:
style: |
ha-state-icon {
animation: surprise 3s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-6px) rotate(-14deg); }
5% { transform: translateY(-6px) rotate(11deg); }
7.5% { transform: translateY(-6px) rotate(-8deg); }
10% { transform: translateY(-6px) rotate(5deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-3px) }
}
Ring Animation (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:phone-classic
icon_color: light-green
primary: Ring
card_mod:
style: |
ha-state-icon {
clip-path: polygon(0 100%, 100% 100%, 100% 67%, 66% 39%, 66% 25%, 34% 25%, 34% 40%, 0 68%);
}
- type: custom:mushroom-template-card
icon: mdi:phone-hangup
icon_color: light-green
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
top: -4px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: ring 1s ease infinite;
}
@keyframes ring {
0%, 50%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-4px) rotate(-27deg); }
20% { transform: translateY(-4px) rotate(21deg); }
30% { transform: translateY(-4px) rotate(-15deg); }
40% { transform: translateY(-4px) rotate(9deg); }
60% { transform: translateY(-2.4px); }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Marker Animation (changed)
type: custom:mushroom-template-card
icon: mdi:map-marker
icon_color: red
primary: Marker
card_mod:
style: |
ha-state-icon {
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: translateY(-4px) scale3d(0.75, 1.25, 1); }
10% { transform: scale3d(1.25, 0.75, 1); }
12% { transform: translateY(-2px) scale3d(0.85, 1.15, 1); }
16% { transform: scale3d(1.05, 0.95, 1); }
19% { transform: scale3d(0.95, 1.05, 1); }
25% { transform: scale3d(1, 1, 1); }
}
Beat Animation (changed)
type: custom:mushroom-template-card
primary: Beat
icon: mdi:speaker
icon_color: blue
card_mod:
style: |
ha-state-icon {
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
Door Animation (changed)
type: custom:mushroom-template-card
icon: mdi:door
icon_color: brown
primary: Door
card_mod:
style:
mushroom-shape-icon$: |
.shape {
perspective: 45px;
}
.: |
ha-state-icon {
animation: open 6s ease-in-out infinite;
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
Bounce Animation (changed)
type: custom:mushroom-template-card
icon: mdi:tennis-ball
icon_color: amber
primary: Bounce
card_mod:
style: |
ha-state-icon {
animation: bounce 0.6s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
transform-origin: 50% 100%;
}
@keyframes bounce {
0%, 100% { transform: translateY(0px) scaleY(0.9); }
80% { transform: translateY(-3px); }
}
Ghost Animation (changed)
type: custom:mushroom-template-card
primary: Ghost
icon: mdi:ghost-outline
icon_color: grey
card_mod:
style: |
ha-state-icon {
animation: drift 10s ease-in-out infinite, blink 4s infinite;
}
@keyframes drift {
0%, 100% { transform: translate(3px, 0px); }
30% { transform: translate(-1px, 2px); }
45% { transform: translate(1.5px, 0px); }
75% { transform: translate(-3.2px, -3px); }
}
@keyframes blink {
0%, 24%, 35%, 74%, 85%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 53%, 25% 52%, 27% 31%, 49% 31%, 49% 54%, 100% 54%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 53%, 49% 51%, 52% 30%, 73% 31%, 75% 52%, 100% 54%, 100% 0); }
}
Ducky Animation (changed)
type: custom:mushroom-template-card
primary: Rubber Ducky
icon: mdi:duck
icon_color: amber
card_mod:
style: |
ha-state-icon {
animation: ducky 2s ease-in-out infinite;
transform-origin: 50% 75%;
}
@keyframes ducky {
0%, 100% { transform: rotate(-15deg); }
50% { transform: rotate(15deg); }
}
Robot Animation (changed)
type: custom:mushroom-template-card
primary: Robot
icon: mdi:robot-outline
icon_color: deep-purple
card_mod:
style: |
ha-state-icon {
animation: tilt 4s steps(1) infinite, blink 4s infinite;
transform-origin: 50% 92%;
}
@keyframes tilt {
0%, 100% { transform: rotate(0deg); }
33% { transform: rotate(8deg); }
66% { transform: rotate(-8deg); }
}
@keyframes blink {
0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
}
Coffee Machine Animation (changed)
type: custom:mushroom-template-card
icon: mdi:coffee-maker
icon_color: brown
primary: Coffee Machine
card_mod:
style: |
ha-state-icon {
animation: java 4s linear infinite;
}
@keyframes java {
0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
}
Apple Animation (changed)
type: custom:mushroom-template-card
primary: Apple
icon: mdi:food-apple
icon_color: green
card_mod:
style: |
ha-state-icon {
animation: bite 4s infinite;
}
@keyframes bite {
0%, 19%, 100% { clip-path: inset(0 0 0 0); }
20%, 39% { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 69% 62%, 74% 66%, 74% 66%, 79% 70%, 100% 75%, 100% 100%, 0 100%); }
40%, 59% { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 63% 60%, 61% 66%, 59% 72%, 61% 79%, 63% 85%, 66% 91%, 76% 100%, 0 100%); }
60%, 79% { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 63% 60%, 61% 66%, 59% 72%, 61% 79%, 63% 85%, 66% 91%, 76% 100%, 0 100%, 0 84%, 23% 75%, 29% 71%, 33% 66%, 35% 59%, 35% 52%, 34% 45%, 29% 40%, 23% 35%, 0 27%); }
80%, 99% { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 63% 60%, 61% 66%, 59% 72%, 61% 79%, 63% 85%, 66% 91%, 76% 100%, 0 100%, 32% 88%, 37% 83%, 39% 76%, 39% 67%, 35% 59%, 35% 52%, 34% 45%, 29% 40%, 23% 35%, 0 27%); }
}
Memory Animation (changed)
type: custom:mushroom-template-card
primary: Memory
icon: mdi:memory
icon_color: orange
card_mod:
style: |
ha-state-icon {
animation: bit 250ms infinite;
}
@keyframes bit {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0% 0%, 0% 100%, 29% 100%, 30% 30%, 70% 30%, 70% 70%, 29% 70%, 29% 100%, 100% 100%, 100% 0%); }
}
Pump Animation (changed)
type: custom:mushroom-template-card
primary: Pump
icon: mdi:water-pump
icon_color: light-blue
card_mod:
style: |
ha-state-icon {
animation: drip 2s infinite;
}
@keyframes drip {
0%, 100% { clip-path: inset(0 0 0 0); }
15%, 85% { clip-path: polygon(0 0, 100% 0, 100% 57%, 64% 57%, 64% 100%, 0 100%); }
}
Power Animation (changed)
type: custom:mushroom-template-card
primary: Power
icon: mdi:power
icon_color: teal
card_mod:
style: |
ha-state-icon {
animation: power 1.5s infinite;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
Garage Animation (changed)
type: custom:mushroom-template-card
primary: Garage
icon: mdi:garage
icon_color: amber
card_mod:
style: |
ha-state-icon {
animation: door 3s steps(1) infinite alternate;
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 73%, 32% 73%, 31% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 61%, 32% 61%, 31% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 48%, 32% 48%, 31% 100%, 0 100%); }
}
Coffee Animation (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:coffee
icon_color: brown
primary: Coffee
card_mod:
style: |
ha-state-icon {
transform: scaleY(0.8);
transform-origin: 50% 100%;
}
- type: custom:mushroom-template-card
icon: mdi:pot-steam
icon_color: brown
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
top: -2px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: steam 2s ease-in infinite;
clip-path: inset(0 0 61% 0);
}
@keyframes steam {
0%, 100% { opacity: 1; }
80% { opacity: 0; }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Auto Fix Animation (changed)
type: custom:mushroom-template-card
icon: mdi:auto-fix
icon_color: cyan
primary: Auto Fix
card_mod:
style: |
ha-state-icon {
animation: sparkle 1.8s linear infinite, kadabra 1.8s ease-in-out infinite;
transform-origin: 10% 90%
}
@keyframes sparkle {
0%, 69%, 74%, 79%, 85% { clip-path: inset(0 0 0 0); }
70% { clip-path: polygon(0 100%, 0 76%, 75% 0, 100% 0, 100% 100%); }
75% { clip-path: polygon(0 100%, 0 0, 39% 0, 100% 62%, 100% 100%); }
80% { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 26%, 25% 100%); }
}
@keyframes kadabra {
0%, 65%, 100% { transform: rotate(-15deg); }
70% { transform: rotate(20deg); }
75% { transform: rotate(15deg); }
80% { transform: rotate(25deg); }
}
Grinder Animation (changed)
type: custom:mushroom-template-card
icon: mdi:blender
icon_color: orange
primary: Grinder
card_mod:
style: |
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 90%;
clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 75%, 33% 62%);
}
@keyframes shake {
0%, 100% { transform: rotate(3deg); }
50% { transform: rotate(-3deg); }
}
Solar Panel Animation (changed)
type: custom:mushroom-template-card
icon: mdi:solar-power-variant
icon_color: amber
primary: Solar Panel
card_mod:
style: |
ha-state-icon {
animation: rays 2s infinite;
}
@keyframes rays {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
}
Light Bulb Animation (changed)
type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: amber
primary: Light Bulb
card_mod:
style: |
ha-state-icon {
animation: illumination 2s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
Eureka Animation (changed)
type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: orange
primary: Eureka
card_mod:
style: |
ha-state-icon {
animation: eureka 1.8s infinite;
}
@keyframes eureka {
0%, 45%, 55%, 100% { transform: translateY(0) scale(1); clip-path: polygon(20% 100%, 21% 38%, 36% 22%, 62% 21%, 79% 37%, 80% 100%, 53% 100%, 55% 67%, 62% 62%, 66% 55%, 67% 46%, 62% 38%, 55% 34%, 47% 34%, 39% 37%, 34% 44%, 33% 53%, 36% 60%, 41% 64%, 45% 66%, 45% 76%, 56% 76%, 54% 100%); }
10%, 40% { transform: translateY(-5px) scale(1.12); clip-path: inset(0 0 0 0); }
50% { transform: translateY(-2px) }
}
Trash Animation (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
primary: Trash
card_mod:
style: |
ha-state-icon {
clip-path: inset(26% 0 0 0);
}
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
top: 0.3px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: lid 1s ease infinite;
clip-path: inset(0 0 75% 0);
transform-origin: 50% 25%;
}
@keyframes lid {
0%, 50%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-5px) rotate(-37deg); }
20% { transform: translateY(-5px) rotate(31deg); }
30% { transform: translateY(-5px) rotate(-25deg); }
40% { transform: translateY(-5px) rotate(19deg); }
60% { transform: translateY(-3px); }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Heat Pump Animation (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:heat-pump-outline
icon_color: deep-purple
primary: Heat Pump
card_mod:
style: |
ha-state-icon {
clip-path: polygon(0% 0%, 0% 100%, 23% 100%, 23% 23%, 78% 22%, 77% 78%, 23% 78%, 22% 100%, 100% 100%, 100% 0%);
}
- type: custom:mushroom-template-card
icon: mdi:heat-pump-outline
icon_color: deep-purple
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
position: absolute;
animation: spin 2s linear infinite;
clip-path: circle(27.3% at 50% 50%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
Air Purifier Animation (changed)
type: custom:mushroom-template-card
icon: mdi:air-purifier
icon_color: cyan
primary: Air Purifier
card_mod:
style: |
ha-state-icon {
animation: air 1s infinite;
}
@keyframes air {
0%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 98% 32%, 63% 42%, 65% 58%, 100% 43%); }
75% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% 44%, 64% 61%, 64% 73%, 100% 72%); }
50% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 78% 38%, 64% 43%, 64% 72%, 100% 73%); }
}
Calendar Clock Animation (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:calendar-clock
icon_color: purple
primary: Calendar Clock
card_mod:
style: |
ha-state-icon {
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 67%, 85% 69%, 73% 52%, 59% 52%, 59% 72%, 77% 81%, 85% 68%, 100% 67%, 100% 100%);
}
- type: custom:mushroom-template-card
icon: mdi:calendar-clock
icon_color: purple
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 67% 67%;
clip-path: circle(17% at 67% 67%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
CRT Animation (changed. i did also change the if statement structure here because i find this method easier to read and trouble shoot.)
type: custom:mushroom-template-card
primary: CRT
entity: switch.television
icon: mdi:television-classic
icon_color: '{{ ''orange'' if is_state(entity, ''on'') }}'
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;
{% else %}
animation: tube-off 2s linear forwards;
{% endif %}
}
@keyframes tube-off {
1%, 15% { transform: scale(1, 0.2); }
40% { transform: scale(0.2); opacity: 1; }
100% { transform: scale(0.2); opacity: 0; }
}
@keyframes tube-on {
0% { transform: scale(0.2); opacity: 0; }
5% { transform: scale(1, 0.2); opacity: 0.3; }
15% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 1; }
}
Microwave Animation (changed)
type: custom:mushroom-template-card
icon: mdi:microwave
icon_color: blue
primary: Microwave
card_mod:
style: |
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
animation: cook 1s linear infinite;
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}
Controlling the Animation in your Card
The animations can be controlled using a Jinja Template condition on the animation command.
For example if I wanted an animation when my coffee machine is on I would use an if statement like this:
{{ 'animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}
Added by Dimitri.
Or you can make your if statement block like this instead. i think this is easier to read. it does take up more space in the code, but easier to see what is happening 
the {% else %} is technically not even required.
{% if is_state(config.entity, 'on') %}
animation: java 4s linear infinite;
{% else %}
{% endif %}
The complete card would look like this:
Coffee Machine Card (new if statements and structure changed)
type: custom:mushroom-template-card
entity: switch.coffee_machine
icon: mdi:coffee-maker
icon_color: '{{ ''brown'' if is_state(entity, ''on'') }}'
primary: Coffee Machine
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: java 4s linear infinite;
{% else %}
{% endif %}
}
@keyframes java {
0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
}
Or if I wanted to have the dryer animate when the load is over 4w I would do this:
{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.dryer_power') | float > 4 }}
Added by Dimitri.
Or you can make your if statement block like this instead. i think this is easier to read. it does take up more space in the code, but easier to see what is happening the {% else %} is technically not even required.
{% if states(sensor.dryer_power) | float > 4 %}
animation: shake 400ms ease-in-out infinite, drum 1s infinite;
{% else %}
{% endif %}
The complete card would look like this:
Dryer Card (new if statements and structure changed)
type: custom:mushroom-template-card
entity: switch.dryer
icon: mdi:tumble-dryer
icon_color: '{{ ''teal'' if states(''sensor.dryer_power'') | float > 4 }}'
primary: Dryer
card_mod:
style: |
ha-state-icon {
transform-origin: 50% 65%;
{% if states('sensor.dryer_power') | float > 4 %}
animation: shake 400ms ease-in-out infinite, drum 1s infinite;
{% else %}
{% end if %}
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
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); }
}
You will need to add the if condition for each animation:, --icon-animation: or --shape-animation: command in the card.
Added by Dimitri.
This is not true if you complete the if statements in the way that i have showed. that is unless you need the animations to be based on different conditions.
Using the Animations with Tile Card
The structure of the new Tile Card is very similar to the Mushroom Cards, so it is easy to use these animations with it.
Mushroom Card (changed)
card_mod:
style: |
ha-state-icon {
}
Tile Card (changed)
card_mod:
style:
ha-tile-icon$: |
ha-icon {
}
Animated Tile Card (changed)
type: tile
entity: fan.bathroom_fan
color: green
card_mod:
style:
ha-tile-icon$: |
ha-icon {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
Updated Posts 
Part 1, Part 2, Part 3, Part 4, Part 5
Original Posts by @rhysb please only like his posts.
Part 1, Part 2, Part 3, Part 4, Part 5
And btw. I already liked the original posts from 
Valuing the work of 
