Change/pulse color on icon

Configuration
1

Hi

Trying to get a icon to blink between 2 colors
Don’t even know if it is possible.
Been trying to search on Google and came up short

  - type: state-icon
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    entity: switch.sonoff_1000891e59
    title: CCTV
    style:
      top: 41%
      left: 8%
      '--paper-item-icon-color': **pulse between red and black**
      '--paper-item-icon-active-color': green
1 Like
2

Hello!

If you didn’t figure out since:

type: custom:button-card
state:
  - value: 'on'
    styles:
      card:
        - transition: all .1s ease
        - '--mdc-ripple-color': black
        - '--mdc-ripple-press-opacity': 0.5
        - animation:
            - light .5s alternate infinite
      icon:
        - color: var(--button-card-light-color)
        - transition: all .1s ease
        - animation:
            - lighticon .5s alternate infinite
  - value: 'off'
    styles:
      icon:
        - opacity: 0.3
        - transition: all .1s ease
extra_styles: |
  @keyframes light {
    0% {
      box-shadow: 0 0 .9rem .1rem var(--button-card-light-color);
    }
    70% {
      box-shadow: 0 0 1rem .5rem red;
    }
    100% {
      box-shadow: 0 0 .9rem .1rem var(--button-card-light-color);
    }
  }
  @keyframes lighticon {
    0% {
      transform: scale(1);
    }
    70% {
      transform: scale(1.1);
      color: red;
    }
    100% {
      transform: scale(1);
    }
  }
tap_action:
  action: toggle
hold_action:
  action: more-info
entity: light.nappali
show_name: false

This is one of my button I’m working on right now.
It looks like this now:
button

If you want to try it you need custom button card:
https://github.com/custom-cards/button-card

1 Like