Christmas Tree animated icon

Configuration Frontend
1

Hi there,

trying to create animated icon for christmas tree, struggle a bit. Could someone make it work please?

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pine-tree
    icon_color: green
    primary: Christmas Tree
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    icon_color: yellow
    primary: Star
    card_mod:
    style: |
      ha-icon {
        animation: star 8s ease infinite alternate;
      }
      @keyframes star {
       0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
       50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    style: |
      ha-icon {
      animation: surprise 4s ease infinite;
      }
      @keyframes surprise {
          0%, 20%, 100% { transform: translateY(0); }
          2.5% { transform: translateY(-2px) rotate(-27deg); }
           5% { transform: translateY(-2px) rotate(21deg); }
          7.5% { transform: translateY(-2px) rotate(-15deg); }
          10% { transform: translateY(-2px) rotate(9deg); }
          12.5% { transform: translateY(0); }
           15% { transform: translateY(-1.2px) }
          }
          .shape {
            --shape-color: none;
            --icon-size: 20px;
            top: 16px;
            left: 18px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -132px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Appreaciate any help :slight_smile:

NB: still using card_mod 3.xxx version. Checked all other related posts, however they are all outdated.

Thanks

1 Like
2

https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371#oneone-format-it-properly-16

1 Like
3

you could try this:

type: vertical-stack
card_mod:
  style: |
    #root {
      background: brown;
    }
cards:
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    primary: Star
    color: yellow
    features_position: bottom
    card_mod:
      style: |
        ha-card {
          background: green;
        }
        ha-state-icon {
          animation: star 8s ease infinite alternate;
        }
        @keyframes star {
          0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
          50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
        }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    card_mod:
      style: |
        ha-card {
          background: lightgreen;
        }
        ha-state-icon {
          animation: surprise 4s ease infinite;
          }
          @keyframes surprise {
              0%, 20%, 100% { transform: translateY(0); }
              2.5% { transform: translateY(-2px) rotate(-27deg); }
               5% { transform: translateY(-2px) rotate(21deg); }
              7.5% { transform: translateY(-2px) rotate(-15deg); }
              10% { transform: translateY(-2px) rotate(9deg); }
              12.5% { transform: translateY(0); }
               15% { transform: translateY(-1.2px) }
              }

and continue from there

Dec-19-2025 13-46-45

1 Like
4

Hey,

thanks for your help.

I would like to achieve this:
image

Any idea how to get cards together in one composition? :slight_smile:

Thanks

5

No but you should hop over to the mushroom styling guide thread for more options probably.

1 Like