Trying to implement animation for each state for the icon of the custom button card, however, struggling to get it to work within the javascript if statements - the bold below won’t register (obviously) any help with the correct placement would be much appreciated! I haven’t added @keyframes yet, as I can tell the code won’t work based on the icon disappearing
- type: custom:mod-card
card:
type: custom:button-card
entity: input_boolean.dead_space
show_icon: true
show_name: true
show_state: false
icon: mdi:sprinkler-variant
name: Sprinklers
styles:
card:
- height: 100px
- width: 133.5px
name:
- justify-self: left
- padding-left: 10px
icon:
- color: >
[[[ if (states['input_boolean.sprinklers_90'].state ==
"on") return 'red';**animation: blink 4s linear infinite**; if
(states['input_boolean.sprinklers_80_89'].state ==
"on") return 'yellow'; **animation: blink 4s linear infinite**; if
(states['input_boolean.sprinklers_70_79'].state ==
"on") return 'cyan'; **animation: blink 4s linear infinite**;
return 'white';
]]]
- height: 30px
- width: 30px
- right: 75%
- top: 10%
- padding-left: 10px
state:
- justify-self: left
- padding-left: 10px
-
card_mod:
style: |
ha-card {
background-color: transparent !important;
box-shadow: none;
margin-top: 9px;
margin-left: -5px;
}