Did you ever find a solution to this?
I got it working thanks to @Ildar_Gabdullin , and pointing out a typo in my quotes.
For those of you that want to have fan icon rotation based on speed work for any fan universally. All you got to do is add this code to the bottom of your theme and it should work.
card-mod-theme: "your_theme_name"
card-mod-card: |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
ha-icon[data-domain="fan"][data-state="on"] {
animation: spin 4s infinite linear;
}
card-mod-row-yaml: |
"*:first-child$": |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') and state_attr(config.entity, 'percentage') | int <= 15 %}
animation: spin 4s infinite linear;
{%- elif config.entity.startswith('fan.') and is_state(config.entity, 'on') and state_attr(config.entity, 'percentage') | int <= 33 %}
animation: spin 3s infinite linear;
{%- elif config.entity.startswith('fan.') and is_state(config.entity, 'on') and state_attr(config.entity, 'percentage') | int <= 67 %}
animation: spin 1.5s infinite linear;
{%- elif config.entity.startswith('fan.') and is_state(config.entity, 'on') and state_attr(config.entity, 'percentage') | int <= 100 %}
animation: spin 0.75s infinite linear;
{%- else -%}
animation-duration: 0s;
{%- endif %}
}
Anybody have an idea?
Thank you. It worked. And I then somehow also got it to work using card-mod.
Now I am just stuck with the two cards in the same grid area not being overlapped but rather stacked on top of each other.
Is it possible to send one to the back and bring one to the front?
It kind of looks as if placing both in the same area of the grid had moved everything up one ārowā. Normally all icons etc. are aligned (see second image).
Sorry, the code is now a bit longer than ideal for a help request.
- type: entities
entities:
- type: custom:slider-entity-row
entity: climate.eq_3_living_room
name: Living Room
full_row: true
min: 4.5
max: 23
step: 0.5
hide_state: false
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
font-size: 100%;
font-weight: normal;
color: white;
white-space: nowrap;
}
.card-content {
margin: 0;
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
width: 100%;
}
view_layout:
grid-area: sub2
- type: custom:apexcharts-card
layout: minimal
graph_span: 240h
experimental:
color_threshold: true
yaxis:
- id: first
show: false
min: 0
decimals: 0
apex_config:
legend:
show: false
grid:
show: false
series:
- entity: sensor.eq_3_temperature_living_room
stroke_width: 2
group_by:
func: last
fill_raw: zero
color_threshold:
- value: 4.5
color: blue
- value: 20
color: red
type: line
opacity: 1
curve: stepline
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 0;
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
width: 50%;
height: 100%;
}
view_layout:
grid-area: sub2
getting back to some of my āspinā cards, I use these in a modded entity, and in the buttons succesfully, and the icons spin regularly:
However, the same entities are stumbling around when used in a picture-glance
which uses this card-mod:
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
'div:nth-child(2)':
would anyone know why this is happening? maybe takes more power from the frontend? It is happening on Desktop only, both Safari and Chrome, the iOS app behaves very nicely
thanks for having a look!
1 Like
Itās ages since Iāve done this stying stuff. Couldnāt find any info on how to template a picture-elements state label color with card mod. This is the non-working config I have:
- type: state-label
entity: sensor.air_temperature
style:
top: 0%
left: 40%
ha-card {
--primary-text-color: |-
{% if states('sensor.weatherflow_air_temperature')|float(0) > 10 %}
magenta;
{% else %}
cyan;
{% endif %}
}
Any suggestions?
youāve got this fixed now 
? Didnāt get this. Ah. Ok. Saw in Discord now. Just wanted to show the working code here. But if it is already solved there, great.
I have the same issue 
Something seems to be wrong with the vertical align of the deep ha-svg-icon element.
Try this to unset the vertical align:
type: picture-glance
title: Kitchen
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities:
- entity: binary_sensor.remote_ui
- entity: binary_sensor.dummy_motion_sensor_1_2
- entity: input_boolean.z_test_ddd
card_mod:
style:
.: |
.box div:nth-child(3) ha-icon-button {
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
.box div:nth-child(3) ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
vertical-align: unset;
}
I have simplified the rest as well somehow. Not sure, if it is working in your config as well.
Thanks, but unfortunately it is notā¦ just to be sure you get the whole picture, this is my full glance config:
type: picture-glance
title: Vijverpompen
image: /local/images/areas/vijver.png
state_filter:
'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
- switch.vijverpomp_links
- switch.vijverpomp_rechts
- input_boolean.vijverpompen_alterneren
- sensor.pond_buiten_sensor_temperature
- binary_sensor.vijverpompen
# - sensor.vijverpompen
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
'div:nth-child(2)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_rechts','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
.: |
.box div:nth-child(3) div:nth-child(1) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
.box div:nth-child(3) div:nth-child(2) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
If I add the vertical-align unset, it does show the icons nicely placed but the animation is no longer effective: no coloring, no rotating.
Then leave the rest as you had before.
I am no able to get that to work either, contrary to what I said above. I believe I fluked, and added the vertical-align in the top shadow root settings somehow, and not in the Botton section under .:
I tested both the colorizing animation standalone, and that works as expected, and the rotating animation, which standalone also shows the odd rotating.
next I deleted the bottom section under .: completely, as it merely configures the base color, which afterwards is either rotating (colorizing) or off and then gets the default color.
Finally I tried to only rotate 1 icon, which is a real life situation, but that too remains the same: 1 icon jumping up and down while rotating, the other nicely placed.
so, back to:
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
'div:nth-child(2)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_rechts','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
btw, I wish we had a way to declare this with config.entity, and could use a yaml anchorā¦
Try this
type: picture-glance
title: Vijverpompen
image: /local/images/areas/vijver.png
state_filter:
'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
- input_boolean.z_test_ddd
- input_boolean.z_test_ddd
- input_boolean.vijverpompen_alterneren
- sensor.pond_buiten_sensor_temperature
- binary_sensor.vijverpompen
card_mod:
style:
.box div:nth-child(3) ha-icon-button:
ha-state-icon $ ha-icon $: |
ha-svg-icon {
vertical-align: unset;
}
.: |
.box div:nth-child(3) div:nth-child(1) ha-icon-button {
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
}
.box div:nth-child(3) div:nth-child(2) ha-icon-button {
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
.box div:nth-child(3) div:nth-child(1) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
.box div:nth-child(3) div:nth-child(2) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
of course you have to re-add the ifās and change back the test entities.
really sorry but NO, this does not work, in fact it does nothing, not even set the fixed colorsā¦
btw, just so this was tested also: I cleared my test view except for this card, and the performance is identical.
This rules out any other interaction that might cause the icons to start out circling ok, but then become shaky and start stuttering
Pls share me your code using in modded entity and button (icons spin regularly 
) !
really sorry but I dont understand what youāre asking now ?
a right.
entity:
- type: custom:template-entity-row
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2182
entity: binary_sensor.vijverpompen
card_mod:
style:
div#wrapper: |
state-badge {
{% if is_state(config.entity,'on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
background: steelblue;
}
100% {
background: aquamarine;
}
}
so its only 900 posts up
type buttons use the spin property which is available in custom:button-cards natively
this is the button_card_template for that:
spin:
state: &spin
- value: 'on'
id: state-on
spin: true
1 Like