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 %}
}