🔹 Card-mod - Add css styles to any lovelace card

Map card - some animations

m1

code
type: map
entities:
  - entity: ...
card_mod:
  style:
    ha-map $:
      ha-entity-marker $: |
        .marker {
          outline-style: solid;
          outline-width: 1px;
          outline-color: var(--accent-color);
          animation: resizing_outline 1s linear infinite;
        } 
        @keyframes resizing_outline {
          0% {
            outline-offset: 0;
          }
          25% {
            outline-offset: 5px;
          }
          50% {
            outline-offset: 10px;
          }
          75% {
            outline-offset: 15px;
          }
          100% {
            outline-offset: 20px;
          }
        }

m2

code
type: map
entities:
  - entity: ...
card_mod:
  style:
    ha-map $:
      ha-icon $: |
        ha-svg-icon {
          animation: resizing 1s linear infinite;
        }
        @keyframes resizing {
          0% {
            transform: scale(0.3,0.3);
          }
          25% {
            transform: scale(0.7,0.7);
          }
          50% {
            transform: scale(1,1);
          }
          75% {
            transform: scale(1.15,1.15);
          }
          100% {
            transform: scale(1.3,1.3);
          }
        }
7 Likes