Multiple CSS Animation - only one at a time animating

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.

image

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?

Define an icon for light.hot_water and see what happens.

Done, but it’s still doing it.

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.

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.

It also might be that you are using a different web browser. Which browser are you both using?

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

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