horizontal buttons Card

[telegrambeans]

How can I animate the icon with state?

Thx

[Clooos]

Hi, do you have a more specific example? I'm not sure to understand what you want to achieve.

[telegrambeans]

I want to animate the icon of the horizontal buttons card depending on the status. E.g. room 1 is occupied and the symbol is moving:

animation: beat 1.3s ease-out infinite both;
      transform-origin: 50% 60%;

@keyframes beat {
      0% { transform: scale(1); }
      10% { transform: scale(1.1); }
      17% { transform: scale(1.05); }
      33% { transform: scale(1.25); }
      60% { transform: scale(1); }
    }

[telegrambeans]

It only works with an animation, but only because it is present in the source code. So he doesn't use the keyframe.

Example:

  .wohnzimmer {
    background: transparent !important;
    border: transparent !important;
    ha-icon {
     animation: ${hass.states['binary_sensor.bewegung_wohnzimmer_gesamt'].state === 'on' ? 'pulse 2s infinite alternate' : 'none'}! important;
     @keyframes pulse {
        0% {filter: brightness(0.1) !important;}
        50% {filter: brightness(0.5) !important;}
        100% {filter: brightness(1.0) !important;}
        50% {filter: brightness(0.5) !important;}
        0% {filter: brightness(0.1) !important;}
      }
     color: ${hass.states['light.stehlampe_l'].state === 'on' ? '#fdc10a' : 'withe'}! important;
    } 
  }

[telegrambeans]

Example icon:

lv_0_20240207155458.mp4

[telegrambeans]

Is there a way to do that?

[Clooos]

I guess but I'm not sure, I will have to try that but it's not my priority right now because I have a lot of other issues 😅

But if you progress on that please tell me how you did it.

[pgale]

I know this is an old-ish post. I couldn't get the icon animation working through the custom styles section of Bubble Card but you can do it with card_mod. This is how I animated a gentle rotation for a fan switch:

card_mod:
  style: |
    .bubble-icon {
      animation: {{ 'slow-rotate 3s linear infinite' if states('light.bedroom_fan') == 'on' else 'none' }};
    }
    @keyframes slow-rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

This how it would look like in the full card:

- type: custom:bubble-card
  card_type: button
  button_type: switch
  entity: light.bedroom_fan
  name: Bedroom fan
  show_state: false
  show_attribute: false
  tap_action:
    action: toggle
  double_tap_action:
    action: none
  hold_action:
    action: none
  card_layout: large
  card_mod:
    style: |
      .bubble-icon {
        animation: {{ 'slow-rotate 3s linear infinite' if states('light.bedroom_fan') == 'on' else 'none' }};
      }
      @keyframes slow-rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
  icon: mdi:fan

You can setup whatever animation takes your fancy. For example I have a custom alarm clock I created with a load of helpers and an automation. When the alarm is snoozed, the alarm on/off switch icon shakes and rotates back and forth like a cartoon alarm clock moving.

@Clooos might be worth adding to the docs unless you plan on supporting the animation style?

[pgale]

No it was not there, but this is basically the same as the other conditional examples.

I will add this one in the doc.

That will help :)

[Clooos]

and is that the same in switches on a dashboard AND in a popup?

Yes 🙂

[pgale]

Just replaced them all - working nicely :)

[Clooos]

Done 👌

[pgale]

Nice :)