I have the following configuration for a picture-elements card.
type: picture-elements
image: /local/ll_matte_home.png
elements:
- style:
color: white
top: 73%
left: 12%
transform: 'translate(-50%, -50%) scale(5, 5)'
type: state-label
entity: sensor.matte_hem
I want to make the element of type state-label blink every 4 seconds. What could be done?
Thanks in advance.
I have tried this but not able to achieve what i am looking for. There are also very little examples on this thread. Not an expert with CSS styling.
sparkydave
(๐ฆ๐บ Dave)
December 19, 2020, 3:12am
4
Theres this example in the git repo:
Example
Make a blinking button
type: entity-button
entity: light.bed_light
style: |
@keyframes blink {
50% {
background: red;
}
}
ha-card {
animation: blink 2s linear infinite;
}
This is not working. I already tried. The problem is that in this the background blinks not the state label or the icon.
KTibow
(Kendell R)
December 19, 2020, 3:32am
6
Thatโs just an example. You need to update the code.
I am trying but not pulling it of. Not so much of an expert in CSS
JTPublic
(JT)
December 19, 2020, 3:46am
8
This works for me:
type: picture-elements
image: /local/mainfloor.png
style: |
@keyframes blink {
0% {background-color: pink;}
50% {background-color: black;}
}
elements:
- type: state-label
entity: climate.home
style:
animation: blink 5s linear infinite
top: 8%
left: 13%
color: red
3 Likes
For some reason this is not working for me. But i made it work with custom button card. Thanks for the help.
tmkmarius
(Marius T.)
January 22, 2021, 7:45am
10
There is a possibility that only when a sensor is turned on will the icon blink?
JTPublic
(JT)
January 22, 2021, 3:14pm
11
The simplest way without templating I can think of is the wrap a blinking icon or state-icon element in a conditional element with the sensor you want controlling the blinking icon.
This way, just need to change above code from background-color to color and state-label to icon or state-icon inside a conditional element.