Skip to content

horizontal buttons Card #495

Feb 4, 2024 · 7 comments · 9 replies
Discussion options

You must be logged in to vote

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…

Replies: 7 comments 9 replies

Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
9 replies
@pgale
Comment options

@Clooos
Comment options

@pgale
Comment options

@Clooos
Comment options

@pgale
Comment options

Answer selected by MrBearPresident
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
3 participants
Converted from issue

This discussion was converted from issue #378 on April 30, 2024 11:35.