Card mod - blink card

Configuration Frontend
1

I have the following code to make a card blink. It fades in, is it possible to make it blink without fading so just on/off.

card:
            type: custom:mushroom-entity-card
            entity: sensor.blue_bin
            icon_type: entity-picture
            card_mod:
              style: |
                ha-card {
                  border: solid 3px red;
                  box-shadow: none;
                  animation:
                    {% if state_attr('sensor.blue_bin', 'daysTo') < 3 %} 
                      blink 2s linear infinite;
                    {% else -%} none
                    {% endif %}
                }
                  @keyframes blink {
                  from {opacity: 100;}
                  to {opacity: 0;}
                  from {opacity: 0;}
                  to {opacity: 100;}
                }

Thanks

2

Hi, try this:

ha-card {
 animation: blink 0.5s step-start infinite;
}
@keyframes blink {
 0% {
  opacity: 1;
 }
 50% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
3

The closer you have the percentages, the less fading will appear

@keyframes blink {
          70% {
          opacity: 1;
             }
          100% {
          opacity: 0;
             }}
4

Works perfectly, thanks!

For bonus points can you make it so the actual card doesn’t flash? So the contents remain static, just the border flashes grey and red.

5

Thanks. I did try changing the opacity values in my original code but didn’t work.