Thank you very much for the tip
how are you tracking your d/load & u/load totals?
Did you get this resolved, I have the same problem and not sure how to proceed
Hi, thank you very much for your wondeful work.
when you have time can you please add āmdi:thermostatā and āmdi:solar-power-variant( sun turns while the panel stays)ā.
thank you.
maybe this helps: Lovelace: Migrate from storage to yaml mode - Configuration / Frontend - Home Assistant Community (home-assistant.io)
Mushroom Animations - Part 4
Even More Mushroom Card Icon Animations
HA Animation
type: custom:mushroom-template-card
icon: mdi:home-assistant
icon_color: blue
primary: Home Assistant
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
icon: mdi:gift
icon_color: deep-orange
primary: Surprise
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:phone-classic
icon_color: light-green
primary: Ring
card_mod:
style:
mushroom-shape-icon$: |
ha-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$: |
ha-icon {
--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); }
}
.shape {
--shape-color: none;
top: -4px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
Marker Animation
type: custom:mushroom-template-card
icon: mdi:map-marker
icon_color: red
primary: Marker
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
primary: Beat
icon: mdi:speaker
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--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
type: custom:mushroom-template-card
icon: mdi:door
icon_color: brown
primary: Door
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: open 6s ease-in-out infinite;
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
.shape {
perspective: 45px;
}
Bounce Animation
type: custom:mushroom-template-card
icon: mdi:tennis-ball
icon_color: amber
primary: Bounce
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
primary: Ghost
icon: mdi:ghost-outline
icon_color: grey
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
primary: Rubber Ducky
icon: mdi:duck
icon_color: amber
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
primary: Robot
icon: mdi:robot-outline
icon_color: deep-purple
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
icon: mdi:coffee-maker
icon_color: brown
primary: Coffee Machine
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
primary: Apple
icon: mdi:food-apple
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
primary: Memory
icon: mdi:memory
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
primary: Pump
icon: mdi:water-pump
icon_color: light-blue
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
primary: Power
icon: mdi:power
icon_color: teal
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
primary: Garage
icon: mdi:garage
icon_color: amber
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:coffee
icon_color: brown
primary: Coffee
card_mod:
style:
mushroom-shape-icon$: |
ha-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$: |
ha-icon {
--icon-animation: steam 2s ease-in infinite;
clip-path: inset(0 0 61% 0);
}
@keyframes steam {
0%, 100% { opacity: 1; }
80% { opacity: 0; }
}
.shape {
--shape-color: none;
top: -2px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
Auto Fix Animation
type: custom:mushroom-template-card
icon: mdi:auto-fix
icon_color: cyan
primary: Auto Fix
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
icon: mdi:blender
icon_color: orange
primary: Grinder
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
icon: mdi:solar-power-variant
icon_color: amber
primary: Solar Panel
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: amber
primary: Light Bulb
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: orange
primary: Eureka
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
primary: Trash
card_mod:
style:
mushroom-shape-icon$: |
ha-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$: |
ha-icon {
--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); }
}
.shape {
--shape-color: none;
top: 0.3px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
Heat Pump Animation
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:
mushroom-shape-icon$: |
ha-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$: |
ha-icon {
position: absolute;
--icon-animation: spin 2s linear infinite;
clip-path: circle(27.3% at 50% 50%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
Air Purifier Animation
type: custom:mushroom-template-card
icon: mdi:air-purifier
icon_color: cyan
primary: Air Purifier
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--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
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:calendar-clock
icon_color: purple
primary: Calendar Clock
card_mod:
style:
mushroom-shape-icon$: |
ha-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$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 67% 67%;
clip-path: circle(17% at 67% 67%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
CRT Animation
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:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;' if is_state(config.entity, 'on') else '--icon-animation: tube-off 2s linear forwards;' }}
}
@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
type: custom:mushroom-template-card
icon: mdi:microwave
icon_color: blue
primary: Microwave
card_mod:
style:
mushroom-shape-icon$: |
ha-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:
{{ '--icon-animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}
The complete card would look like this:
Coffee Machine Card
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:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}
}
@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:
{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.dryer_power') | float > 4 }}
The complete card would look like this:
Dryer Card
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:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.dryer_power') | float > 4 }}
transform-origin: 50% 65%;
}
@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.
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
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
}
Tile Card
card_mod:
style:
ha-tile-icon$: |
ha-svg-icon {
}
Animated Tile Card
type: tile
entity: fan.bathroom_fan
color: green
card_mod:
style:
ha-tile-icon$: |
ha-svg-icon {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
Added one for Solar Power. Canāt rotate half a sun sorry.
Not much to animate with the Thermostatā¦
Would require a lot of work to do.
This should do what you want:
type: custom:mushroom-template-card
primary: Heater
secondary: >-
{{ 'Heating' if states('sensor.smartplug_heater_2nd_floor_power') | float >
4 else 'Idle' }}
icon: mdi:heat-wave
entity: switch.smartplug_heater_2nd_floor
icon_color: '{{ ''red'' if is_state(entity, ''on'') }}'
tap_action:
action: toggle
This is really amazing work! Love it, many thanks! If I where to wish for one animation it would be for the light bulb.
@rhysb Thank you for sharing your knowledge
How can I use the animation only when the state of the entity is on?
IOS on Ipad Pro
Can you share yours energy cards?
Works like a charm! Thanks again.
Btw, with all the work you contribute in this thread you should have a patreon
- type: custom:mushroom-template-card
primary: AC
secondary: >-
{% set ac_on = expand(states.group.ac) | selectattr( 'state', 'eq','on') |
list | count %} {% if ac_on > 1 %}
{{ ac_on }} On
{% elif ac_on == 1 %}
{{ ac_on }} On
{% else %} {% endif %}
layout: vertical
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }} '
entity: group.ac
tap_action:
action: more-info
hold_action:
action: toggle
icon: mdi:snowflake
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
}
The animation not working, any idea?
One of the biggest āquality-of-lifeā improvements (in my view) to the Mushroom cards would be for only the icon portion of a card to toggle the entity, rather than the whole card being one giant active button.
Quite often Iāve inadvertently grazed over part of a card only to toggle a light/fan/switch etc. unexpectedly. This also happens when trying to go back to the previous screen using the āswipe from edgeā feature on Android. (Obviously these issues are touchscreen-specific).
Thereās already an open issue for this: [Feature]: limit tap target area to the button Ā· Issue #446 Ā· piitaya/lovelace-mushroom Ā· GitHub
However it hasnāt been progressed in months so not sure how likely it is to be officially implemented.
Soā¦is there anyway some of these cardmod tricks could be used to achieve this? Ideally Iād love for just the icon to toggle the underlying entity, and clicking anywhere else on the card would bring up the more-info dialog (or something else).
I think the is_state(config.entity, 'on')
should be just is_state(entity, 'on')