It will be great if these examples help beginners to learn.
Update:
Animation for Entities card:
NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).
Blinking title:
Note: a margin for the 1st row has to be increased.
type: entities
title: Blinking title
icon: mdi:car
entities:
- entity: sun.sun
- sun.sun
card_mod:
style:
div:nth-child(1):
hui-simple-entity-row:
$: |
hui-generic-entity-row {
margin-top: 10px;
}
.: |
.card-header {
background-color: red;
color: white;
animation: blinking 2s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
Whole card blinking:
type: entities
title: Common style
icon: mdi:car
entities:
- entity: sensor.cleargrass_1_co2
name: Common style
- entity: sensor.cleargrass_1_temperature
name: Common style
card_mod:
style: |
ha-card {
color: red;
animation: blinking 2s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
Blinking rows:
type: entities
title: Common style
icon: mdi:car
entities:
- entity: sensor.cleargrass_1_co2
name: Common style
- entity: sensor.cleargrass_1_temperature
name: Common style
card_mod:
style: |
.card-content {
color: red;
animation: blinking 0.5s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 1;}
100% {opacity: 0;}
}
Different elements blinking:
type: entities
title: Common style
icon: mdi:car
entities:
- sun.sun
- sensor.cleargrass_1_co2
- sun.sun
card_mod:
style:
hui-simple-entity-row:
$:
hui-generic-entity-row:
$: |
state-badge {
color: orange;
animation: blinking 2s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
.text-content:not(.info) {
color: red;
animation: blinking 2s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
hui-sensor-entity-row:
$:
hui-generic-entity-row:
$: |
.info {
color: magenta;
animation: blinking 2s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
.card-header:
.name .icon:
$: |
ha-svg-icon {
color: green;
animation: blinking 2s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
.: |
.name {
color: cyan;
animation: blinking 2s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 1;}
100% {opacity: 0;}
}
Blinking for rows’ elements, individual style:
type: entities
title: Individual style
icon: mdi:car
entities:
- entity: sun.sun
name: Individual style
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
color: green !important;
animation: blink 2s linear alternate infinite;
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0;}
}
.text-content:not(.info) {
color: red;
animation: blinking 2s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
- entity: sensor.cleargrass_1_co2
name: Individual style
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
color: red !important;
animation: blink 2s linear alternate infinite;
}
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}
.info {
color: magenta;
animation: blinking 4s linear alternate infinite;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
Animations for icons:
type: entities
entities:
- entity: sun.sun
name: rotating
icon: 'mdi:fan'
style:
hui-generic-entity-row:
$: |
state-badge {
color: orange;
animation: rotation 0.5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- entity: sun.sun
name: swinging
icon: 'mdi:bell'
style:
hui-generic-entity-row:
$: |
state-badge {
color: red;
animation: wobbling 1s linear infinite alternate;
}
@keyframes wobbling {
0% {
transform: rotate(-45deg);
}
100% {
transform: rotate(+45deg);
}
}
- entity: sun.sun
name: coloring
style:
hui-generic-entity-row:
$: |
state-badge {
animation: coloring 8s linear infinite alternate;
}
@keyframes coloring {
0% {
color: red;
}
17% {
color: orange;
}
34% {
color: yellow;
}
51% {
color: green;
}
68% {
color: lightblue;
}
85% {
color: blue;
}
100% {
color: violet;
}
}
- entity: sun.sun
name: resizing
icon: 'mdi:radio-tower'
style:
hui-generic-entity-row:
$: |
state-badge {
animation: resizing 1s linear infinite alternate;
}
@keyframes resizing {
0% {
--mdc-icon-size: 10px;
}
25% {
--mdc-icon-size: 15px;
}
50% {
--mdc-icon-size: 20px;
}
75% {
--mdc-icon-size: 26px;
}
100% {
--mdc-icon-size: 32px;
}
}
- entity: sun.sun
name: stretching 1
icon: 'mdi:bus-side'
style:
hui-generic-entity-row:
$: |
state-badge {
animation: stretching 1s linear infinite alternate;
}
@keyframes stretching {
0% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(2.0);
}
}
- entity: sun.sun
name: stretching 2
icon: 'mdi:human-handsup'
style:
hui-generic-entity-row:
$: |
state-badge {
animation: stretching 1s linear infinite alternate;
}
@keyframes stretching {
0% {
transform: scaleY(0.5);
}
100% {
transform: scaleY(2.0);
}
}
- entity: sun.sun
name: flipping
icon: 'mdi:timer-sand'
style:
hui-generic-entity-row:
$: |
state-badge {
animation: flipping 1s linear infinite;
}
@keyframes flipping {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
- entity: sun.sun
name: shifting
icon: 'mdi:arrow-left-right'
style:
hui-generic-entity-row:
$: |
state-badge {
animation: shifting 1s linear infinite alternate;
}
@keyframes shifting {
0% {
transform: translate(-5px,0);
}
100% {
transform: translate(5px,0);
}
}
- entity: sun.sun
name: jumping
icon: 'mdi:arrow-up-down'
style:
hui-generic-entity-row:
$: |
state-badge {
animation: jumping 1s linear infinite alternate;
}
@keyframes jumping {
0% {
transform: translate(0,-5px);
}
100% {
transform: translate(0,5px);
}
}
- entity: sun.sun
name: blinking
style:
hui-generic-entity-row:
$: |
state-badge {
animation: disappear 1s linear infinite alternate;
}
@keyframes disappear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
If you need a conditional animation - see these examples for rotation:
a) rotation ON/OFF:
state-badge {
color: orange;
{% if ..... %}
animation: rotation 0.5s linear infinite;
{% endif %}
}
b) various speed:
state-badge {
color: orange;
{% set SPEED = .... %}
animation: rotation {{SPEED}}s linear infinite;
}
Update (20.05.22):
- This animation does not work on iOS 15.4.1, iOS 12.5.5 & MacOS:
@keyframes resizing {
0% {
--mdc-icon-size: 10px;
}
Use this variants instead:
- entity: sun.sun
name: resizing (height, width)
icon: mdi:radio-tower
card_mod:
style:
hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: resizing 1s linear infinite alternate;
}
@keyframes resizing {
0% {
height: 10px;
width: 10px;
}
25% {
height: 15px;
width: 15px;
}
50% {
height: 20px;
width: 20px;
}
75% {
height: 26px;
width: 26px;
}
100% {
height: 32px;
width: 32px;
}
}
- entity: sun.sun
name: resizing (scale)
icon: mdi:radio-tower
card_mod:
style:
hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: resizing 1s linear infinite alternate;
}
@keyframes resizing {
0% {
transform: scale(0.3,0.3);
}
25% {
transform: scale(0.7,0.7);
}
50% {
transform: scale(1,1);
}
75% {
transform: scale(1.15,1.15);
}
100% {
transform: scale(1.3,1.3);
}
}
Animation using custom properties is promised to be added in Safari 16.
- This animation glitches on iOS 15.4.1, iOS 12.5.5 & MacOS (glitches affecting a whole card):
@keyframes flipping {
0% {
transform: rotateX(0deg);
}
No solution for this so far.
The animation may work OK but also may cause glitches. This is Apple, sorry.
Update 18.04.23: flipping is OK on iOS 15.7.3 (Companion App)
More examples are described here.