Card Mod keyframe ping in markdown card

Configuration Frontend
1

Hi all,

I am trying to implement the “ping effect” in a markdown card. The rotation effect is working, but what is wrong with the ping?

type: markdown
content: >-

  <p> <font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font><font
  size="2"></font></p>

  <u> <font color="#4CAF50"><ha-icon icon="mdi:wifi"></ha-icon></font><font
  size="2"></font> </u>

  Rotationstest 3s <br><br> <i> <font color="#4CAF50"><ha-icon
  icon="mdi:wifi"></ha-icon></font>
card_mod:
  style:
    ha-markdown $: |
      ha-markdown-element p ha-icon{
      color: blue;
      --mdc-icon-size: 30px;
      position: relative;
      float: right; 
      transform: rotate(90deg);
      }
      ha-markdown-element u ha-icon{
      color: green;
      --mdc-icon-size: 30px;
      position: relative;
      float: left; 
      animation: spin 1s linear infinite;
      }
      ha-markdown-element i ha-icon{
      color: green;
      --mdc-icon-size: 30px;
      position: relative;
      float: left; 
      animation: ping 2s infinite;
      --icon-symbol-size: 20px;
      }


      @keyframes spin {
      100% { transform: rotate(360deg);}
      }
      @keyframes spin2 {
      100% { transform: rotate(360deg);}
      }
      @keyframes ping 
       {
        0%
        {
         box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
        }
        100%
        {
         box-shadow: 0 0 5px 15px transparent;
        } 
       }
  .: |
    ha-card {
    padding-bottom: 30px;
    }
2

I’d suggest posting in the main card mod thread here

1 Like
3

ok, I did it in the main thread. Thanks.