Mushroom Animations 
- Part 5
Mushroom Chip Animations
Chip Animated Scene
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
- type: template
icon: mdi:snail
icon_color: brown
- type: template
icon: mdi:flower
icon_color: amber
- type: template
icon: mdi:butterfly
icon_color: cyan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: bump 10s infinite;
transform-origin: 50% 100%;
}
@keyframes bump {
0% { transform: translateX(0); }
1% { transform: translateX(-0.6px) rotate(-9deg); }
2% { transform: translateX(0.5px) rotate(7deg); }
3% { transform: translateX(-0.3px) rotate(-5deg); }
4% { transform: translateX(0.2px) rotate(3deg); }
5% { transform: translateX(0); }
}
mushroom-template-chip:nth-child(2)$: |
ha-icon {
animation: slip 0.5s linear infinite alternate;
transform-origin: 100% 100%;
}
@keyframes slip {
from { transform: scale(1.05, 0.9);}
to { transform: scale(0.9, 1.05); }
}
mushroom-template-chip:nth-child(3)$: |
ha-icon {
animation: bump 10s infinite;
transform-origin: 50% 100%;
}
@keyframes bump {
50% { transform: translateX(0); }
51% { transform: translateX(-0.6px) rotate(-9deg); }
52% { transform: translateX(0.5px) rotate(7deg); }
53% { transform: translateX(-0.3px) rotate(-5deg); }
54% { transform: translateX(0.2px) rotate(3deg); }
55% { transform: translateX(0); }
}
mushroom-template-chip:nth-child(4)$: |
ha-icon {
animation: flutter 5s infinite alternate;
}
@keyframes flutter {
0% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
}
.: |
.chip-container {
background: radial-gradient(circle, rgba(var(--rgb-light-blue), 0.1) 0%, transparent 100%);
border-bottom: 3px dotted rgba(var(--rgb-green));
border-radius: 20%;
box-shadow: 0 5px 1px 0.1px rgba(var(--rgb-green), 0.2)
}
mushroom-template-chip:nth-child(2) {
animation: slide 10s ease-in-out infinite;
}
@keyframes slide {
0% { transform: translate(0px, 0px) rotateY(0deg); }
50% { transform: translate(100px, 0px) rotateY(0deg); }
50.1% { transform: translate(100px, 0px) rotateY(180deg); }
100% { transform: translate(0px, 0px) rotateY(180deg); }
}
mushroom-template-chip:nth-child(3) {
transform: translate(100px);
}
mushroom-template-chip:nth-child(4) {
animation: by {{ range(5, 15) | random }}s ease infinite;
}
@keyframes by {
0% { transform: translate(100px, 0px); }
50% { transform: translate({{ range(110, 150) | random }}px, 0px); }
100% { transform: translate(100px, 0px); }
}
Adding Animations to Chips
Adding an animation to a Mushroom Chip is a bit more complicated than a normal Mushroom Card. You have the Chips 'parent' and multiple Chip 'children'. The card_mod can be applied differently to each.
To the Chip
The simplest method is to add the card_mod to the Chip. The disadvantage of doing this is that we can't address the icon directly, so animations such as clip-path will not work and we can't have any text on the Chip. This method also breaks the GUI editor of the Chips, so you have to configure with YAML.
Chip Animation
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
.content {
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); }
}
- type: template
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
.content {
animation: spin 3s ease 1.5s infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
To the Chips
The more complex but correct method is to add the card_mod to the Chips (parent) and then address each Chip (child). This is done by referencing the mushroom-<chip-type>-chip:nth-child(x) where x is the number of the Chip and <chip-type> is type of Chip, such as template, entity, light etc. So, if I wanted to reference the 5th Entity Chip I would use mushroom-entity-chip:nth-child(5) or the 2nd Template Chip mushroom-template-chip:nth-child(2). The functionality of the GUI editor is retained with this method.
Chips Animation
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
- type: template
content: Mushroom
icon: mdi:mushroom
icon_color: red
- type: light
entity: light.rocket_man
icon: mdi:rocket-launch
name: Rocket Man
content_info: name
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-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); }
}
mushroom-template-chip:nth-child(2)$: |
ha-icon {
animation: spin 3s ease 1.5s infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
mushroom-light-chip:nth-child(3)$: |
ha-icon {
{{ 'animation: thrust 100ms infinite, motion 3s ease-in-out infinite;' if is_state('light.rocket_man', 'on') }}
}
@keyframes thrust {
0% { clip-path: polygon(0 0, 0 47%, 22% 57%, 28% 63%, 0 91%, 11% 100%, 37% 73%, 45% 77%, 55% 100%, 100% 100%, 100% 0%); }
33% { clip-path: polygon(0 0, 0 47%, 24% 59%, 42% 76%, 54% 100%, 100% 100%, 100% 0); }
66% { clip-path: polygon(0 0, 0 92%, 28% 64%, 36% 72%, 9% 100%, 100% 100%, 100% 0%); }
}
@keyframes motion {
0%, 100% { transform: translateY(-2px) translateX(-3px); }
50% { transform: translateY(3px) translateX(2px); }
}
Even More Mushroom Card Icon Animations
Monitor Animation
type: custom:mushroom-template-card
icon: mdi:monitor
icon_color: purple
primary: Monitor
card_mod:
style:
mushroom-shape-icon$: |
ha-icon:before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
}
Email Animation
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:email
icon_color: orange
primary: Email
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: email 4s infinite;
}
@keyframes email {
0%, 32%, 100% { opacity: 1; }
33%, 99% { opacity: 0; }
}
- type: custom:mushroom-template-card
icon: mdi:email-open
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: email-open 4s infinite;
}
@keyframes email-open {
0%, 32%, 100% { opacity: 0; }
33%, 65% { opacity: 1; }
66% { opacity: 0; }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
- type: custom:mushroom-template-card
icon: mdi:email-newsletter
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: email-newsletter 4s infinite;
}
@keyframes email-newsletter {
0%, 65% { opacity: 0; }
66% { opacity: 1; }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
Email #2 Animation
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:email
icon_color: orange
primary: 'Email #2'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: email 2s infinite;
}
@keyframes email {
0%, 49%, 100% { opacity: 1; }
50%, 99% { opacity: 0; }
}
- type: custom:mushroom-template-card
icon: mdi:email-open
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: email-open 2s infinite;
}
@keyframes email-open {
0%, 49%, 100% { opacity: 0; }
50%, 99% { opacity: 1; }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
Christmas Tree #2 Animation
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pine-tree
icon_color: green
primary: 'Christmas Tree #2'
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -198px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
3D Printing Animation
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:printer-3d-nozzle
icon_color: cyan
primary: 3D Printing
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
clip-path: inset(83% 72% 0 0);
}
.: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:printer-3d-nozzle
icon_color: cyan
primary: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: print 1s linear infinite alternate;
}
@keyframes print {
0% { transform: translateX(4px); }
30% { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 26%); }
100% { transform: translateX(-4px); clip-path: polygon(0 0, 100% 0%, 100% 100%, 40% 100%, 0 26%); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 66px;
}
3D Printer Animation
type: custom:mushroom-template-card
primary: 3D Printer
icon: mdi:printer-3d
icon_color: light-blue
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: print 2s infinite;
}
@keyframes print {
0%, 100% { clip-path: polygon(0 0, 0 51%, 20% 51%, 51% 33%, 81% 53%, 100% 53%, 100% 0); }
10% { clip-path: polygon(0 0, 0 100%, 49% 100%, 85% 83%, 49% 98%, 50% 89%, 51% 82%, 46% 79%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
20% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 56% 79%, 51% 83%, 46% 79%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
30% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 54% 69%, 50% 61%, 45% 69%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
40% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 54% 69%, 50% 61%, 45% 69%, 34% 63%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 66% 63%, 54% 69%, 50% 61%, 45% 69%, 34% 63%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
60% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 66% 63%, 55% 69%, 50% 61%, 39% 55%, 32% 55%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
70% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 68% 53%, 60% 55%, 50% 61%, 39% 55%, 32% 55%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
80% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 68% 53%, 60% 55%, 50% 61%, 50% 50%, 51% 37%, 31% 44%, 30% 35%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
90% { clip-path: polygon(0 0, 0 100%, 100% 100%, 77% 51%, 67% 42%, 64% 34%, 56% 34%, 50% 36%, 39% 40%, 31% 44%, 30% 35%, 41% 33%, 85% 53%, 100% 52%, 100% 0); }
}
Auto Fix #2 Animation
type: custom:mushroom-template-card
icon: mdi:auto-fix
icon_color: cyan
primary: 'Auto Fix #2'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: sparkle 2s linear infinite, kadabra 2s ease-in-out infinite;
transform-origin: 10% 90%
}
@keyframes sparkle {
0%, 68%, 100% { clip-path: polygon(0% 100%, 1% 75%, 56% 22%, 80% 43%, 26% 100%); }
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); }
}
Vroom Animation
type: custom:mushroom-template-card
icon: mdi:car-hatchback
icon_color: red
primary: Vroom
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: vroom 2s ease-in-out infinite;
}
.shape {
clip-path: inset(0 0 0 0);
}
@keyframes vroom {
49% { opacity: 1;}
50% { transform: translate(32px); opacity: 0; }
51% { transform: translate(-32px); opacity: 0; }
52% { opacity: 1; }
}
Double Garage Animation
type: custom:mushroom-template-card
primary: Double Garage
icon: mdi:garage-variant
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, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
}
Continued in