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:

https://github.com/Clooos/Bubble-Card/assets/13040847/c7560599-53c5-4809-9c06-33d3b6663ec9

[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.