Wow! Great! Thank you so much, that indeed did the trick 
Please help me to recreate this card 
You have forgotten the configuration in case it is not ‘on’, solution (I have written it from my mobile, it may not be correctly tabulated):
type: custom:mushroom-template-card
icon: mdi:air-purifier
icon_color: |
{{ 'cyan' if is_state(config.entity, 'on') else 'disabled' }}
entity: input_boolean.konditsionery
tap_action:
action: toggle
card_mod:
style: ""
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
{% if states(config.entity) == 'on' %}
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%); }
}
… rest of your code …
{% else %}
ha-state-icon {
animation: none;
}
{% endif %}
You are great. Works.
Would you help me insert this animation into this card into the TV icon.
Thanks again for the help
type: custom:button-card
name: SOGGIORNO
icon: mdi:sofa
show_state: false
show_label: true
label: |
[[[
return Math.round(states['sensor.weather_station_temperature'].state) + "°C" + "  " + Math.round(states['sensor.weather_station_humidity'].state) + " %";
]]]
tap_action:
action: navigate
navigation_path: '#soggiorno'
custom_fields:
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: none
entity: media_player.tv_samsung_58
icon: mdi:television
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
--chip-background: {{ 'rgba(199, 239, 207, 0.8)' if is_state('media_player.tv_samsung_58', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.tv_samsung_58', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(199, 239, 207, 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(199, 239, 207, 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-icon {
{{ 'animation: refresh 300ms linear infinite;' if is_state('media_player.tv_samsung_58', 'on') }}
}
@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%); }
}
styles:
grid:
- grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content 1fr
img_cell:
- justify-content: center
- position: absolute
- width: 80px
- height: 80px
- left: 0
- bottom: 0
- margin: 0 0 -25px -25px
- background: '#FFF'
- border-radius: 200px
icon:
- width: 35px
- color: black
- opacity: '0.6'
- margin: 0 0 18px 15px
card:
- padding: 10px 20px 10px 10px
animation still doesn’t work…
This will get it running
type: custom:mushroom-template-card
icon: mdi:air-purifier
icon_color: |
{{ 'cyan' if is_state(config.entity, 'on') else 'disabled' }}
entity: input_boolean.konditsionery
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
{% if states(config.entity) == 'on' %}
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%); }
}
{% else %}
{% endif %}
2 Likes
@president75 Is there a reason you are using a Chips card vs a Mushroom Template card?
Chips are more difficult to code. This is what it looks like with a template card
You need disable animation if else:
{% else %}
ha-state-icon {
animation: none;
}
{% endif %}
1 Like
It appeared he had additional code based on your notes in the code so i just left that part alone. I should have made that clear.
You can also just eliminate the {% else %} and only have the {% endif %} The automation will still stop.
1 Like
Try clean cache and reload.
1 Like
Your code was solid, just alignment issues that prevented the animation from running.
1 Like
Good morning Liquid,
I started with HA about a month ago. I found some Card Chips online that I liked and started working on those.
If you can simplify the code for me by changing it into template cards, so that by comparing the codes I can understand the difference and learn, I would be truly grateful. I am attaching the entire code of the card where the TV animation does not work.
Thanks again for the help you give everyone.
You are the best
type: custom:button-card
name: SOGGIORNO
icon: mdi:sofa
entity: light.luci_soggiorno
show_state: false
show_label: true
label: |
[[[
return Math.round(states['sensor.weather_station_temperature'].state) + "°C" + "  " + Math.round(states['sensor.weather_station_humidity'].state) + " %";
]]]
tap_action:
action: navigate
navigation_path: '#soggiorno'
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: none
entity: light.luci_soggiorno
icon: |
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-outline
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
black
{% else %}
white
{% endif %}
- type: template
tap_action:
action: none
entity: switch.interruttori_soggiorno
icon: |
{% if is_state(entity, 'on') %}
mdi:power-socket-eu
{% else %}
mdi:power-socket-eu
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
red
{% else %}
white
{% endif %}
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card:after {
content: "{{ states('sensor.luci_accese_soggiorno') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 15px;
z-index: 1;
}
ha-card {
--chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.luci_soggiorno', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('light.luci_soggiorno', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 34px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state('light.luci_soggiorno', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card:after {
content: "{{ states('sensor.prese_accese_soggiorno') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 15px;
z-index: 1;
}
ha-card {
--chip-background: {{'rgba(140, 199, 161, 1)' if is_state('switch.interruttori_soggiorno', 'on') else 'rgba(140, 199, 161, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('switch.interruttori_soggiorno', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
{% if is_state('switch.interruttori_soggiorno', 'on') %}
animation: tilt 4s steps(1) infinite, blink 4s infinite;
transform-origin: 50% 92%;
{% else %}
{% endif %}
}
@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%); }
}
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: none
entity: climate.soggiorno
icon: |
{% if (states["climate.soggiorno"].attributes["hvac_action"] ==
"heating") %}
mdi:fire
{% else %}
mdi:thermostat
{% endif %}
icon_color: |
{% if (states["climate.soggiorno"].attributes["hvac_action"] ==
"heating") %}
black
{% else %}
white
{% endif %}
- type: template
tap_action:
action: none
entity: media_player.tv_samsung_58
icon: |
{% if is_state(entity, 'on') %}
mdi:television
{% else %}
mdi:television
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
blue
{% else %}
white
{% endif %}
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
--chip-background: {{'rgba(186, 233, 234, 1)' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") else 'rgba(186, 233, 234, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 34px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
{% if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") %}
animation: fire 1.5s infinite;
transform-origin: 50% 85%;
{% else %}
{% endif %}
}
@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}}; }
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card {
--chip-background: {{ 'rgba(199, 239, 207, 0.8)' if is_state('media_player.tv_samsung_58', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.tv_samsung_58', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(199, 239, 207, 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(199, 239, 207, 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
{% if is_state('media_player.tv_samsung_58', 'on') %}
{{ '--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; }
}
styles:
grid:
- grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content 1fr
img_cell:
- justify-content: center
- position: absolute
- width: 80px
- height: 80px
- left: 0
- bottom: 0
- margin: 0 0 -25px -25px
- background: '#72F3CD'
- border-radius: 200px
icon:
- width: 35px
- color: black
- opacity: '0.6'
- margin: 0 0 18px 15px
card:
- padding: 10px 20px 10px 10px
- border: solid 2px rgba(114, 243, 205, 1)
custom_fields:
btn:
- justify-content: end
- align-self: start
btn1:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: '#72F3CD'
- margin-bottom: 5px
label:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- margin-bottom: 50px
- color: '#fff'
Based on your full card, Chips is still the way to go. I’ll get the animation running with the code you just posted. As soon as I saw this card code, it reminded me we worked out some other issues. I sometimes forget which card I assisted with before. 
All we have left is the TV animation, correct? I see there is already animation for the TV that is different.
Do you want flicker or refresh like your earlier post?
If both are possible
Thanks
Friends, after adding animated icons without a background to the “picture-elements” card, a white, faint line remains around the button. Is there any way to get rid of it? Or maybe you can change its radius somehow? so that this white stripe is reduced to the size of a button and then it will not be visible… Please help, I don’t understand how this can be overcome, it really spoils the appearance.
- type: custom:mushroom-template-card
entity: fan.ventilation_pwm_fan4
tap_action:
action: more-info
icon: mdi:fan
icon_color: |
{{ '#00bcd4' if is_state(config.entity, 'on') else 'grey' }}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
{% set pwr = states(config.entity) %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if (perc <= 17 and pwr == 'on') %} animation: rotation 2.5s linear infinite
{% elif (perc <= 34 and pwr == 'on') %} animation: rotation 2s linear infinite
{% elif (perc <= 51 and pwr == 'on') %} animation: rotation 1.5s linear infinite
{% elif (perc <= 67 and pwr == 'on') %} animation: rotation 1s linear infinite
{% elif (perc <= 84 and pwr == 'on') %} animation: rotation .75s linear infinite
{% elif (perc <= 100 and pwr == 'on') %} animation: rotation .5s linear infinite
{%- else %} animation: rotation 0s linear infinite
{% endif %};
}
ha-card {
background: none;
box-shadow: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
#width: 75%;
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);
}
style:
top: 37.7%
left: 3.58%
transform: scale(1.6)
Hey everyone. For a couple of my mushroom cards, I will sometimes get the following error
custom element doesn’t exist: mushroom-climate-card
As soon as I refresh the card will show up. It’s NOT a cache issue. Its the same couple of cards that do it every time. Any browser and any phone.
Any idea what bug I might have going on in Mushroom?
Going on 2 years now with the issue, I could never get an answer that worked
@Valen This should work for you. I edited the entire card_mod, but border: none also needed to be added.
type: custom:mushroom-template-card
entity: fan.ventilation_pwm_fan4
icon: mdi:fan
icon_color: |
{{ '#00bcd4' if is_state(config.entity, 'on') else 'grey' }}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
animation:
{% set pwr = states(config.entity) %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set spd = 'rotation infinite linear' %}
{% if ( pwr == 'off') %} 0s {{spd}}
{% elif (perc <= 17 and pwr == 'on') %} 2.5s {{spd}}
{% elif (perc <= 34 and pwr == 'on') %} 2s {{spd}}
{% elif (perc <= 51 and pwr == 'on') %} 1.5s {{spd}}
{% elif (perc <= 67 and pwr == 'on') %} 1s {{spd}}
{% elif (perc <= 84 and pwr == 'on') %} .75s {{spd}}
{% elif (perc <= 100 and pwr == 'on') %} .5s {{spd}}
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);} }
ha-card {
border: none;
background: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
}
1 Like