Your animation name is spin, but the two defined @keyframes are shake and drum. Was this working previously using those names?
Sorry, I also need help 
The examples I saw all have the | right after âstyleâ, which I donât. I donât understand what the different commands actually do and cannot adjust it myself⌠Sorry for jumping onto the âhelp meâ train.
card_mod:
style:
.: |
ha-card {
border: inset gold;
background-color: rgb( 255 215 0 / 0.1);
}
mushroom-shape-icon$: |
ha-icon {
{% if states('timer.waschmaschine')!='idle' %}
--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
{% endif %}
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); }
}
I tried adjusting the following two versions but it didnât change anything.
style:
.: |
ha-card {
border: inset gold;
background-color: rgb( 255 215 0 / 0.1);
}
mushroom-shape-icon$: |
ha-state-icon {
{% if states('timer.waschmaschine')!='idle' %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
{% endif %}
transform-origin: 50% 110%;
}
style:
.: |
ha-card {
border: inset gold;
background-color: rgb( 255 215 0 / 0.1);
}
ha-state-icon$: |
{% if states('timer.waschmaschine')!='idle' %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
{% endif %}
transform-origin: 50% 110%;
card_mod:
style: |
ha-state-icon {
{% if is_state('switch.ventilator','on') %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
You only need this.
try like this.
card_mod:
style: |
ha-card {
border: inset gold;
background-color: rgb( 255 215 0 / 0.1);
}
ha-state-icon {
{% if states('timer.waschmaschine')!= 'idle' %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
{% else %}
{% endif %}
}
@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); }
}
3 Likes
I really appreciate the quick reply. It works perfectly again. <3
Now I can adjust the rest of the code myself.
1 Like
I would do it like this.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('media_player.gh_mini', 'playing') %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 5px 1px rgba(var(--rgb-teal), 0.7);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-state-icon {
{% if is_state('media_player.gh_mini', 'playing') %}
animation: music 2s ease-in-out infinite alternate;
transform-origin: 50% 100%
{% else %}
{% endif %}
}
@keyframes music {
0%, 100% { transform: translateY(0px) scaleX(1); }
20% { transform: translateY(2px) scaleX(0.9); }
40% { transform: rotateY(10deg) rotateZ(-10deg); }
60% { transform: translateY(-4px) scaleX(1.1); }
80% { transform: rotateY(-10deg) rotateZ(10deg); }
}
So split up your animation that is for the âbackgroundâ or the outside shape of the icon. and then seperately for your animation that is for the mdi icon itself.
Mushroom Input Time Card
My meager offering⌠I really wanted a card like this and managed to hack one together. The example shows a âcardâ configured to a simple âmorning lightsâ automation that is triggered by an even simpler âmorning lightsâ time helper. The âcardâ allows the user to edit the time (without a popup) and to enable/disable the automation entirely. Itâs been received well in my family and I can imagine several places this might be useful.
Disclaimer: Iâm a beginner. Iâve been using this âcardâ for a few weeks, on different platforms, without any issues, but Iâve likely made some rookie mistakes.
Requirements: Aside from Lovelace and Mushroom, this âcardâ (its not really a card) requires card-mod and vertical-stack-in-card or equivalent(s).
Credit and many thanks to @Ildar_Gabdullin for his endless examples of input_datetime CSS styling.
Code
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Morning Lights
secondary: >-
{{ iif (is_state('automation.bedroom1_morning_lights', 'on'), 'Enabled
at:', 'Disabled') }}
icon: >-
{{ iif (is_state('automation.bedroom1_morning_lights', 'on'),
'mdi:alarm-light-outline', 'mdi:alarm-light-off-outline') }}
icon_color: >-
{{ iif (is_state('automation.bedroom1_morning_lights', 'on'), 'green',
'grey') }}
entity: automation.bedroom1_morning_lights
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
--primary-text-color:
{% if is_state('automation.bedroom1_morning_lights', 'on') %}
var(--primary-text-color)
{% else -%}
var(--secondary-text-color)
{% endif %}
}
- type: entities
entities:
- entity: input_datetime.bedroom1_morning_lights
secondary_info: none
card_mod:
style:
hui-generic-entity-row $: |
state-badge { display: none; }
div.info.pointer { display: none; }
ha-time-input:
$ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
{% if is_state('automation.bedroom1_morning_lights','off') %}
--mdc-text-field-ink-color: var(--disabled-text-color);
color: var(--disabled-text-color);
--mdc-select-ink-color: var(--disabled-text-color);
--mdc-text-field-idle-line-color: var(--disabled-text-color);
--mdc-select-idle-line-color: var(--disabled-text-color);
--mdc-select-dropdown-icon-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
card_mod:
style: |
#states {
padding-top: 12px;
padding-bottom: 12px;
padding-left: 0px;
align-self: end;
}
#states > div{
border: 1px solid rgba(127,127,127,0.5);
border-radius: 6px !important;
box-shadow: 3px 2px 5px rgba(0,0,0,0.16);
}
Edit: I fixed the last line of code so it works properly in dark mode (rookie mistake). 
MrGrey.
27 Likes
Thanks for helping me out. It worked! Yay 
Unfortunately my animation doesnât work anymore.
Can you help me?
Thanks.
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: sunny 8s ease-in-out infinite alternate;'
if is_state(config.entity, 'on') }}
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
Look up in some of the recent posts.
You need to remove --icon-animation and replace with just animation
Then you need to use ha-state-icon instead of ha-icon. But this also means removing mushroom-shape-icon$: | and just using style: |
1 Like
good thinking, it worked! thank you, I will now rewrite all of my animations and will follow that approach from now on!
thanks again
Doesnât quite fit in here, but maybe someone knows a solution.
I have a popup card about browser mode. Can I set the popup card to close when I click on a room?
Anyone know if itâs possible to address a template chip icon directly for animation, rather than using nth-child from the mushroom-chips-card to select it? - The issue is iâm using decluttering card with some conditional chips so depending on what is visible the ânthâ number changes meaning the wrong chip animates.
Iâd like to use clip animation but place it directly in the card mod for just that chip, but I canât see to get it to work.
Short and sweet. No.
you have to go via the nth-child.
i dont know what the decluttering card does exactly but if you have a conditional chip with a template chip inside of it it would be the conditional chip that you are getting the nth-child of.
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: charge 3s linear infinite;
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
Therefore the numbers should never change. (but again, not sure what the decluttering card does).
post your yaml and ill see if i can help 
1 Like
Hi
With Update 3.0.5
I canât get my FIRE animation to work
Can you help me?
Thanks in advance
primary: Fire
icon: mdi:fire
icon_color: red
card_mod:
style: |
ha-states-icon {
animation: fire 1.5s infinite;
transform-origin: 50% 85%;
}
@keyframes fire {
0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
}
tiniest of error.
ha-states-icon should be ha-state-icon.
works fine after
2 Likes
type: custom:mushroom-template-card
icon: mdi:truck-cargo-container
icon_color: red
primary: Vroom
secondary: ''
card_mod:
style: |
ha-state-icon {
animation: vroom 2s ease-in-out infinite;
}
.shape {
clip-path: inset(55% 55% 55% 55%);
}
@keyframes vroom {
49% { opacity: 1;}
50% { transform: translate(32px); opacity: 0; }
51% { transform: translate(-30px); opacity: 0; }
52% { opacity: 1; }
}
Works nicely, except the truck âleavesâ the icon and enters from outside of the icon. Canât figure out, how to fix that, in the demo at the top of the page, it worked just fine. The truck should stay within the bounds of the icon (red circle)!
Thanks a lot some days we need an outside perspective
Nice popup! 
Mind sharing the code?
Anyway, if nothing else or simpler comes up, you could try it via a script. Set the tap_action to call a script, where you can have as many actions/service calls as you want. Would be in this case the action you want to call by pushing the button, and afterwards you can call the browser_mod.close_popup service to, yeah, close the popup.
Great Idea! Thank you. I will try it.
Here is my Popup Code:
type: custom:popup-card
entity: input_boolean.menu
card:
type: vertical-stack
cards:
- type: custom:button-card
show_icon: false
show_state: true
show_name: true
tap_action:
action: none
name: RĂUME
styles:
card:
- background-color: transparent
name:
- font-size: 30px
- color: var(--primary-color)
- font-weight: lighter
card_mod:
style: |
ha-card { border-radius: 50px;
background: transparent;
box-shadow: none;
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Badezimmer
entity_id: climate.heizung_ankleidezimmer
secondary: >-
{{ state_attr('climate.heizung_badezimmer',
'current_temperature') }} °C
icon: mdi:shower
entity: group.badezimmer_licht
tap_action:
action: navigate
navigation_path: badezimmer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.badezimmer_licht
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: switch.tasmota2
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:fan
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation 2s linear infinite;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.badezimmer_licht', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Schlafzimmer
icon: mdi:bed
entity: group.schlafzimmer_licht
tap_action:
action: navigate
navigation_path: schlafzimmer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.schlafzimmer_licht
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: binary_sensor.fenstersensor_schlafzimmer_contact
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open-variant
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.schlafzimmer_licht', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kinderzimmer
secondary: >-
{{ state_attr('climate.heizung_kinderzimmer',
'current_temperature') }} °C
icon: mdi:teddy-bear
entity: group.kinderzimmer_licht
tap_action:
action: navigate
navigation_path: kinderzimmer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.kinderzimmer_licht
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: group.kinderzimmer_fenster
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open-variant
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.kinderzimmer_licht', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Ankleidezimmer
secondary: >-
{{ state_attr('climate.heizung_ankleidezimmer',
'current_temperature') }} °C
icon: mdi:wardrobe
entity: ankleidezimmer_licht
tap_action:
action: navigate
navigation_path: ankleidezimmer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.ankleidezimmer_licht
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: binary_sensor.fenstersensor_ankleidezimmer_contact
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open-variant
- type: conditional
conditions:
- entity: binary_sensor.presence_ankleiderzimmer_presence
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.ankleidezimmer_licht', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Wohnzimmer
secondary: >-
{{ state_attr('climate.heizung_wohnzimmer',
'current_temperature') }} °C
icon: mdi:television
entity: group.wohnzimmer_licht
tap_action:
action: navigate
navigation_path: wohnzimmer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.wohnzimmer_licht
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: binary_sensor.terrassentursensor_contact
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open-variant
- type: conditional
conditions:
- entity: binary_sensor.presence_wohnzimmer
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.wohnzimmer_licht', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Essbereich
secondary: null
icon: mdi:table-chair
entity: light.shelly_kuche_essbereich_channel_2
tap_action:
action: navigate
navigation_path: essbereich
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.shelly_kuche_essbereich_channel_2
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: sensor.rolladen_essbereich_level
state: closed
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('light.shelly_kuche_essbereich_channel_2', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: KĂźche
secondary: null
icon: mdi:countertop
entity: group.kuche_licht
tap_action:
action: navigate
navigation_path: kuche
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.kuche_licht
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: group.kuche_fenster
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open-variant
- type: conditional
conditions:
- entity: binary_sensor.presence_kuche_presence
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.kuche_licht', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Arbeitzimmer
icon: mdi:chair-rolling
entity: group.arbeitszimmer_licht
tap_action:
action: navigate
navigation_path: arbeitszimmer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.arbeitszimmer_licht
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: binary_sensor.fenstersensor_arbeitszimmer_contact
state: open
chip:
type: template
icon_color: disabled
icon: mdi:window-open-variant
- type: conditional
conditions:
- entity: binary_sensor.presence_az_presence
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.arbeitszimmer_licht', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Atelier
secondary: >-
{{ state_attr('climate.heizung_atelier', 'current_temperature')
}} °C
icon: mdi:face-woman-shimmer
entity: climate.heizung_atelier
tap_action:
action: navigate
navigation_path: atelier
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.fenstersensor_atelier_contact
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open-variant
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.atelier_licht', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Waschraum
secondary: >-
{{ states('sensor.feuchtigkeitssensor_waschraum_temperature') |
round(0) }} °C
icon: mdi:washing-machine
entity: light.2_deckenlicht_luftung_wasc_channel_1
tap_action:
action: navigate
navigation_path: waschraum
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.2_deckenlicht_luftung_wasc_channel_1
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: light.2_deckenlicht_luftung_wasc_channel_2
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:fan
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation 2s linear infinite;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('light.2_deckenlicht_luftung_wasc_channel_1', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Garten
icon: mdi:tree
entity: sensor.garten_licht
tap_action:
action: navigate
navigation_path: garten
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.garten_licht
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: sensor.garten_steckdosen
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:power-socket-eu
- type: conditional
conditions:
- entity: sensor.garten_bewasserung
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:sprinkler
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('light.2_deckenlicht_luftung_wasc_channel_1', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
1 Like
Hello
for some reason the animation does not work with any of the template cards
however, it is perfect with the climate card
type: custom:mushroom-climate-card
entity: climate.c6c489b1
hvac_modes:
- heat_cool
- heat
- cool
- fan_only
- dry
show_temperature_control: true
collapsible_controls: false
name: Air Conditioner
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
@keyframes dry {
0%, 100% { --icon-symbol-size: 21px; }
10%, 90% { --icon-symbol-size: 22px; }
20%, 80% { --icon-symbol-size: 23px; }
30%, 70% { --icon-symbol-size: 24px; }
40%, 60% { --icon-symbol-size: 25px; }
50% { --icon-symbol-size: 26px; }
}
type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
}
I copied both from here, the card mod is installed