Animated elements by using card-mod.
Blinking state for “unavailable” and “unknown” values:
Note that the same method may be used for other values.
Three styles are here:
- colored & blinking state
- hidden unit
type: 'custom:mini-graph-card'
entities:
- sensor.cleargrass_1_temp
show:
labels: true
style: |
ha-card .states.flex .state .state__uom.ellipsis {
{% if states('sensor.cleargrass_1_temp') in ['unavailable','unknown'] %}
display: none;
{% endif %}
}
ha-card .states.flex .state .state__value.ellipsis {
{% if states('sensor.cleargrass_1_temp') in ['unavailable','unknown'] %}
color: red;
animation: blinking 0.5s linear alternate infinite !important;
{% endif %}
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
state_map:
- value: unavailable
label: Sensor off
- value: unknown
label: Sensor off
Resized & rotating icon:
The rotation speed may depend on the sensor’s value (could be a wind speed, fan speed etc).
In this example the sensor is an "input_number" entity. Change it’s value and see how the rotation speed changes.
Sorry for a video quality…
type: vertical-stack
cards:
- type: markdown
content: |
colored icon
rotating icon
resized icon
style: 'ha-card { color: red; }'
- type: entities
entities:
- entity: input_number.servicewithhistory_value
icon: 'mdi:fan'
name: Fan speed
style:
hui-input-number-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
animation:
{% if states('input_number.servicewithhistory_value')|int <= 250|int -%}
rotation 4s
{%- elif states('input_number.servicewithhistory_value')|int > 250|int and states('input_number.servicewithhistory_value')|int <= 500|int -%}
rotation 2s
{%- elif states('input_number.servicewithhistory_value')|int > 500|int and states('input_number.servicewithhistory_value')|int <= 750|int -%}
rotation 1s
{%- else -%}
rotation 0.3s
{%- endif %}
linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- type: 'custom:mini-graph-card'
entities:
- entity: input_number.servicewithhistory_value
name: "Service: value"
hours_to_show: 1
points_per_hour: 60
icon: 'mdi:fan'
style:
.header.flex .icon ha-icon:
$: |
ha-svg-icon {
--mdc-icon-size: 60px;
fill: orange;
animation:
{% if states('input_number.servicewithhistory_value')|int <= 250|int -%}
rotation 4s
{%- elif states('input_number.servicewithhistory_value')|int > 250|int and states('input_number.servicewithhistory_value')|int <= 500|int -%}
rotation 2s
{%- elif states('input_number.servicewithhistory_value')|int > 500|int and states('input_number.servicewithhistory_value')|int <= 750|int -%}
rotation 1s
{%- else -%}
rotation 0.3s
{%- endif %}
linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}