Bubble Card - how to make card flash

Juggler · April 10, 2025, 5:09pm

I’m trying to get the background of my Bubble Card to conditionally flash. Using the following template, I do get 1 flash, however it does not continue. Can anyone help me on this?

type: custom:bubble-card
card_type: button
entity: alarm_control_panel.main_alarm_partition
name: Alarm
sub_button:
  - icon: mdi:dots-horizontal
    tap_action:
      action: navigate
      navigation_path: "#alarm"
    show_background: false
button_action:
  tap_action:
    action: navigate
    navigation_path: "#alarm"
button_type: state
styles: |-
  .bubble-button-background {
    opacity: 1 !important;
    animation: ${state === 'arming' ? 'fade-animate 3s ease-in-out infinite' : '' };
    background-color: ${state === 'armed_home' ? 'red' : state === 'armed_away' ? 'red' : state === 'arming' ? 'orange' : 'default' } !important;
  }
  @keyframes fade-animate {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

Ildar_Gabdullin · April 10, 2025, 7:26pm

I am not using Bubble card.
But the animation itself is correct:

... {
  ...
  animation: fade-animate 3s ease-in-out infinite;
}
@keyframes fade-animate {
    0%,100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
}

What COULD BE wrong - is using “${” things here.
The “styles: |-” says that the whole “styles” values is a string.
Are you sure that you can use “${}” here?
Are you sure that it is properly processed by the card?
Are you sure it should not be like

styles: >-
  ${
    "xxx {xxx: xxx; xxx: xxx;} xxx {xxx: xxx; xxx: xxx;}" +
    some JS expressions +
    "some more css styles"
  }

?
(as I said - no idea about the Bubble card & if it supports JS)

VietNgoc · April 11, 2025, 2:31am

Probably the state changed to 1 sec only, so the animation could not finish.

Ildar_Gabdullin · April 11, 2025, 2:50am

Checked here with same code.

code

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: fade-animate 3s ease-in-out infinite; 
}
@keyframes fade-animate {
    0%,100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

It is blinking continuously.
You are probably right - it has no enough time to complete.

LiQuid_cOOled · April 11, 2025, 8:11am

Like this

type: custom:bubble-card
card_type: button
entity: light.night_stand
name: Example
styles: |-
  .bubble-button-background {
    animation: ${hass.states['light.night_stand'].state === 'on' ? 'fade 1s linear infinite' : ''};
    background-color: red;
    }
   @keyframes fade{
    0%,100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }

I used a light as an example as I don’t have my alarm system integrated.

Juggler · April 11, 2025, 3:12pm

I figured out my problem… it was the !important tag. Essentially the animation was being hidden by this. Once I removed this, I got the desired effect. A side benefit is that the final state is a red background with 50% opacity – I think it looks good (see below).

For completeness, here is my .yaml. Thank you to everyone for your help!

type: custom:bubble-card
card_type: button
entity: alarm_control_panel.main_alarm_partition
name: Alarm
sub_button:
  - icon: mdi:dots-horizontal
    tap_action:
      action: navigate
      navigation_path: "#alarm"
    show_background: false
button_action:
  tap_action:
    action: navigate
    navigation_path: "#alarm"
button_type: state
styles: |-
  .bubble-button-background {
    animation: ${state === 'arming' ? 'blink 2s ease infinite' : '' };
    background-color: ${state === 'armed_home' ? 'red' : state === 'armed_away' ? 'red' : state === 'arming' ? 'orange' : 'default' };
  }
  @keyframes blink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }