The following works as a Template Card but I can’t get it working as a Chip Card, any ideas?
type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.shellyplus1_441793a43af8_switch_0
name: Fan
icon: mdi:fan
tap_action:
action: toggle
card_mod:
style: |
ha-state-icon {
{% if is_state('switch.shellyplus1_441793a43af8_switch_0', 'on') %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
Thank you very much. It worked.
Currently I have copied the popup card into each tab (kitchen, bathroom, living room). Can I store the irngedwo centrally and access it from any page?
how did you realize this pop-up menu behind plugs? can you show me the code of it?
I think this are this card:
I can’t set up rotation animation. help me please
card_mod:
style: |
ha-state-icon {
@keyframes rotation
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-state-icon {
box-shadow: 0px 0px;
animation: rotation linear infinite !important;
{% set motor_speed = states('sensor.zhimi_airpurifier_ma2_motor_speed') | float %}
{% if motor_speed > 100 and motor_speed < 400 %}
animation-duration: 4s !important;
{% elif motor_speed > 401 and motor_speed < 700 %}
animation-duration: 3s !important;
{% elif motor_speed > 701 and motor_speed < 900 %}
animation-duration: 1.5s !important;
{% elif motor_speed > 901 and motor_speed < 2000 %}
animation-duration: 1.0s !important;
{%- else -%}
animation-duration: ;
{%- endif %}
}
You’ve got ha-state-icon twice.
Thank you very much
And what about chip cards?
they don’t work there at all
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); }
}
You need to still change ha-icon to ha-state-icon
I know everyone is posting about this, and previous edit of my cardmod animations seemed to work based on suggestions here. But now not anymore and there are so many posts I cannot figure it out anymore.
Perhaps someone can help me directly. I have a LOT of not working animations. Neither on browser or in the iOS app since Mushroom’s update. All are formatted the same so if someone can suggest something to fix mine I can prob. apply them to all.
type: custom:mushroom-template-card
primary: Was
secondary: ''
card_mod: null
style: |
{% if is_state('sensor.wasmachine','on') %}
mushroom-shape-icon {
--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); }
}
{% else %}
{% endif %}
}
icon: |-
{% if is_state('sensor.wasmachine', 'on') %}
mdi:washing-machine
{% else %}
mdi:washing-machine-off
{% endif %}
layout: vertical
icon_color: |-
{% if is_state('sensor.wasmachine', 'on') %}
orange
{% else %}
blue-grey
{% endif %}
tap_action:
action: navigate
navigation_path: wasmachine
Hope this doesn’t sound bad, but is it worth revering the change in Mushroom for whom mainaints it? As I just see endless posts of people now stuck who use Cardmod for animations. Just an open question without any mall-content or anything ment by it.
Replace your --icon-animation with just animation.
Replace mushroom-shape-icon with ha-state-icon
All should then be fixed for you.
The changes made that affect card mod users are honestly minor.
Card mod was also never supported for mushroom. But everything still seems to work as long as you change a few entries 
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Serratura Ingresso
secondary: >-
{% if is_state('lock.serratura_ingresso','unlocked')%}
Aperta
{% else %}
Chiusa
{% endif%}
icon: >-
{% if is_state('lock.serratura_ingresso','unlocked') %}
mdi:lock-open
{% else %}
mdi:lock
{% endif%}
layout: horizontal
icon_color: >-
{% if is_state('lock.serratura_ingresso','locked') %}
red
{% else %}
green
{% endif%}
badge_icon: >
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10
%}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
badge_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
tap_action:
action: more-info
entity: sensor.serratura_ingresso_battery_level
- type: custom:mushroom-lock-card
entity: lock.serratura_ingresso
name: Serratura Ingresso
primary_info: none
secondary_info: none
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
{% if is_state('lock.serratura_ingresso','unlocked') %}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
}
someone can help me to remove this line??
Thank you! That did the trick! Can I ask you for one more? I also have some animations on the shape’s themselves. I tried to adapt those with the same idea. removing the – to either shape-animation or animation but no success yet. I’m way to rusty with css (been 5+ years prob) and kind of stuck in the ‘I can read it and copy/paste it, but not fix complex things anymore’ phase I did have I think over 50 animations in my dashboard (mainly warnings if a battery runs out or if it’s charging the icon changes and becomes animated). I may have once gone a bit overboard there. It seems I fixed them all now.
This one doesn’t work yet:
.shape {
shape-animation: ping 1.5s infinite;
}
It’s part of this overall:
card_mod:
style: |
{% if
is_state('binary_sensor.tado_thermostat_connection_state','on')
%}
ha-state-icon {
animation: clip 1.5s infinite;
}
@keyframes clip {
0% { clip-path: circle(13.0% at 50% 50%); }
100% { clip-path: circle(50.0% at 50% 50%); }
}
.shape {
shape-animation: ping 1.5s infinite;
}
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3) inset; }
50% { box-shadow: 0 0 5px 10px transparent inset; }
51% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3); }
}
{% endif %}
My comment about perhaps keep supporting ‘the old way’ was mainly based on seeing how many people run into it, not the size of the change itself. It just seems to have impacted a lot of people. And there are some really nice examples on this forum that are now all not working anymore. If people are like me (can copy/paste complex css, find it on the forum - but these days lack the skill & time to really get what it says) it could be helpfull. But in noway complaining about mushroom, the change, etc. I fully understand it.
Hello all,
first post and immediately a strange problem where I hope for your help. I am currently familiarizing myself with Home Assistant and stumbled across Mushroom Cards.
I am still learning and trying out, but have now stumbled across a behavior that I have not yet found anything about - so I suspect I am doing something wrong.
No matter if I use my own template card or e.g. also the welcome card from @rhysb the following happens:
The page loads and then I still see how the individual CSS commands / formatting are applied (e.g. when a button becomes “round”).
I think the reason is card_mod or the interaction with card mod - but perhaps anybody of you have a solution. Because so it looks really weird on Browser and mobile App 
@dimitri.landerloos i also read your guide for card_mod - perhaps you can give a hint, what i am doing wrong ?
shape-animation should still be --shape-animation.
i think your entire structure is a bit messy in general so i would recommend doing this.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('binary_sensor.tado_thermostat_connection_state','on')
--shape-animation: ping 1.5s infinite;
{% else %}
{% endif %}
}
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3) inset; }
50% { box-shadow: 0 0 5px 10px transparent inset; }
51% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3); }
}
.: |
ha-state-icon {
{% if is_state('binary_sensor.tado_thermostat_connection_state','on') %}
animation: clip 1.5s infinite;
{% else %}
{% endif %}
}
@keyframes clip {
0% { clip-path: circle(13.0% at 50% 50%); }
100% { clip-path: circle(50.0% at 50% 50%); }
}
Hey,
try like this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
clip-path: inset(0% 0% 0% 0%);
}
.: |
ha-state-icon {
animation: vroom 2s ease-in-out infinite;
}
@keyframes vroom {
49% { opacity: 1; }
50% { transform: translate(32px); opacity: 0; }
51% { transform: translate(-30px); opacity: 0; }
52% { opacity: 1; }
}
I’ve been using this style for animating chips like this:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: rotation linear infinite;
{% set counter = states.climate | selectattr('state', 'eq', 'cool') |
selectattr('attributes.friendly_name','search','L8')| list | count %}
{% if counter >= 1 %}
animation-duration: 2s;
{% else %}
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
This used to work but on recents updates from mushroom the animation stopped working. The example for chips templates you have shared works great when the chip has no text content as it rotates the entire card and I have tried different way to just roate the ha-icon without success . Can you share the proper way to interact with the icon only instead of the entire card?
put this under each of your card in the stack.
card_mod:
style: |
ha-card {
border: none;
}
Would this work for your purposes?
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: rotation linear infinite;
{% set counter = states.climate | selectattr('state', 'eq', 'cool') |
selectattr('attributes.friendly_name','search','L8')| list | count %}
{% if counter >= 1 %}
animation-duration: 2s;
{% else %}
{% endif %}
}
@keyframes rotation {
100% {transform: rotate(360deg);}
}
This is it! This works!!!
Thank a lot
I could have sworn I tried this combination!
