bretthoffm
October 14, 2021, 3:49am
1
I have button cards that appear on a lovelace dash when some conditions are met and some are animated via CSS. If only one animated card is present the animation works fine. If a second animated card is present while or even after the first card has been present (without a refresh) then it won’t be animated.
Basically, the snowflake should ‘shiver’ and the bathtub should pulse orange and red.
I’ve only just started playing with CSS so it’s probably something in the way I’ve structured it. I’m using custom button-card to display the icons.
- type: conditional
conditions:
- entity: input_boolean.cold_water
state: 'on'
card:
type: custom:button-card
icon: mdi:snowflake
extra_styles: |
@keyframes wiggle {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
styles:
icon:
- animation:
- wiggle 1s linear infinite
entity: light.hot_water
show_name: false
- type: conditional
conditions:
- entity: light.hot_water
state: 'on'
card:
type: custom:button-card
extra_styles: |
@keyframes heating {
0% {color: red;}
100% {color: orange;}
}
styles:
icon:
- animation:
- heating 3s linear alternate infinite
entity: light.hot_water
tap_action:
action: more-info
hold_action:
action: toggle
show_name: false
Any ideas where I’ve gone wrong?
pedolsky
October 14, 2021, 5:20am
2
Define an icon for light.hot_water and see what happens.
bretthoffm
October 14, 2021, 2:33pm
3
Done, but it’s still doing it.
pedolsky
October 14, 2021, 2:52pm
4
Using your code plus an icon for the second card works fine for me, so alas, I have no clue why it doesn’t work in your installation.
bretthoffm
October 14, 2021, 10:22pm
5
Bugger. It might be something else on the view interfering with it. I’ll isolate the others one by one to see if that helps.
Thanks for your help.
tom_l
October 14, 2021, 10:40pm
6
It also might be that you are using a different web browser. Which browser are you both using?
bretthoffm
October 15, 2021, 5:02am
7
Tried on edge, chromium, firefox and the iOS HA app, also safari on iPadOS.
I’ve just spun up a brand new HA in a VM and only loaded HACS, card-mod and button-card. Still the same issue.
I’ve removed all entities while I just try to get the icons working. This is my entire dash:
title: Home
views:
- path: default_view
title: Home
cards:
- type: custom:button-card
icon: mdi:snowflake
extra_styles: |
@keyframes wiggle {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
styles:
icon:
- animation:
- wiggle 1s linear infinite
show_name: false
- type: custom:button-card
extra_styles: |
@keyframes heating {
0% {color: red;}
100% {color: orange;}
}
styles:
icon:
- animation:
- heating 3s linear alternate infinite
icon: mdi:shower
tap_action:
action: more-info
hold_action:
action: toggle
show_name: false
bretthoffm
October 15, 2021, 5:12am
8
What the.
I got it working by defining the keyframes together in the first card. I thought it might have something to do with extra_styles being there twice. Anywho, thanks for your help. I’ll mark this as solved.
title: Home
views:
- path: default_view
title: Home
cards:
- type: custom:button-card
icon: mdi:snowflake
extra_styles: |
@keyframes wiggle {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes heating {
0% {color: red;}
100% {color: orange;}
}
styles:
icon:
- animation:
- wiggle 1s linear infinite
show_name: false
- type: custom:button-card
styles:
icon:
- animation:
- heating 3s linear alternate infinite
icon: mdi:shower
tap_action:
action: more-info
hold_action:
action: toggle
show_name: false
If anyone wants to correct my formatting please feel free.
1 Like
