Mushroom Cards Card Mod Styling/Config Guide

[dimitri.landerloos]

I linked you to a post with how the new animations work. Part 4 has the exact animation you want to use in it.

@dimitri.landerloos

Trash Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    primary: Trash
    card_mod:
      style: |
        ha-state-icon {
          clip-path: inset(26% 0 0 0);
        }
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            top: 0.3px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: lid 1s ease infinite;
            clip-path: inset(0 0 75% 0);
            transform-origin: 50% 25%;
          }
          @keyframes lid {
            0%, 50%, 80%, 100% { transform: translateY(0); }
            10% { transform: translateY(-5px) rotate(-37deg); }
            20% { transform: translateY(-5px) rotate(31deg); }
            30% { transform: translateY(-5px) rotate(-25deg); }
            40% { transform: translateY(-5px) rotate(19deg); }
            60% { transform: translateY(-3px); }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Try and apply it and if you are still having problems feel free to send a message