Advanced Room Card for Home Assistant / Animated Chips Icons

[olieter]

The animation not work , When i do in alone card its working

type: custom:button-card
show_state: true
name: Woonkamer
icon: mdi:sofa
style: |
ha-card {
background-color: rgba(0,0,0,0);
box-shadow: none;
border: 60px;
}
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:lamp
entity: switch.sonoff_10006f5960
content: Kast
secondary: ‘{{ states (“switch.sonoff_10005fcd55”)}}’
color: black
card_mod:
style: |
ha-card {
–chip-background: {{‘rgba(0, 255, 0, 1)’ if is_state(‘switch.sonoff_10006f5960’, ‘on’) else ‘rgba(230, 0, 0, 0.5)’ }};
padding: 5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:radiator-disabled
entity: switch.sonoff_10005fcd55
content: Schouw
card_mod:
style: |
ha-card {
–chip-background: {{ ‘rgba(0, 255, 0, 1)’ if is_state(‘switch.sonoff_10005fcd55’, ‘on’) else ‘rgba(230, 100, 0, 0.5)’ }};
padding: 5px!important;
border-radius: 100px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.ledstrip
content: Ledstrip
card_mod:
style: |
ha-card {
–chip-background: {{ ‘rgba(0, 255, 0, 1)’ if is_state(‘light.ledstrip’, ‘on’) else ‘rgba(100, 0, 200, 0.5)’ }};
padding: 5px!important;
border-radius: 100px!important;
}
- type: template
entity: switch.sonoff_10005fcd55
content: Kast is {{ states (‘switch.sonoff_10005fcd55’)}}
icon_color: |-
{% if is_state(‘switch.sonoff_10005fcd55’, ‘on’)
%}
amber
{% else %}
grey
{% endif %}
icon: |-
{% if is_state(‘switch.sonoff_10005fcd55’, ‘on’)
%}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-off
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-state-icon {
{{ ‘animation: illumination 2s infinite;’ if is_state(‘switch.sonoff_10005fcd55’, ‘on’) }}
}
@keyframes illumination {
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
styles:
grid:
- grid-template-areas: ‘"n btn " “s btn” “i btn”’
- grid-template-columns: 1fr 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 22px 8px 22px
- height: 280px
custom_fields:
btn:
- justify-content: end
- align-self: start
- padding-top: 20px
name:
- justify-self: start
- align-self: start
- font-size: 12px
- font-weight: 1000
- color: pink
state:
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: 0.7
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: ‘#FFC47E’
- border-radius: 500px
icon:
- position: relative
- width: 100px
- color: black
- opacity: 0.6

[Stiltjack]

How to format your code in forum posts

Spaces at the beginning of the line are critical in yaml, and people trying to help you may want to copy your code so that they can try it out themselves, so please format it correctly when you are posting. Use the preformatted text tool (</> in the edit post toolbar). If it is not immediately visible, it will be in the cogwheel menu. [Code_format] Alternatively you can use three backticks (the key is on the far left, 2nd row on en keyboards) on their own line above and below the code. That i…

[olieter]

type: custom:button-card
show_state: true
name: Woonkamer
icon: mdi:sofa
style: |
ha-card {
  background-color: rgba(0,0,0,0);
  box-shadow: none;
  border: 60px;
   }
custom_fields:
btn:
  card:
    type: custom:mushroom-chips-card
    chips:
      - type: template
        tap_action:
          action: toggle
        icon: mdi:lamp
        entity: switch.sonoff_10006f5960
        content: Kast
        secondary: '{{ states ("switch.sonoff_10005fcd55")}}'
        color: black
        card_mod:
          style: |
            ha-card {
              --chip-background: {{'rgba(0, 255, 0, 1)'if 
                 is_state('switch.sonoff_10006f5960', 'on') else 'rgba(230, 0, 0, 0.5)' }};
              padding: 5px!important;
              border-radius: 100px!important;
            }
      - type: template
        tap_action:
          action: toggle
        icon: mdi:radiator-disabled
        entity: switch.sonoff_10005fcd55
        content: Schouw
        card_mod:
          style: |
            ha-card {
              --chip-background: {{ 'rgba(0, 255, 0, 1)' if 
                is_state('switch.sonoff_10005fcd55', 'on') else 'rgba(230, 100, 0, 0.5)' }};
              padding: 5px!important;
              border-radius: 100px!important;
            }
      - type: template
        tap_action:
          action: toggle
        icon: mdi:led-strip-variant
        entity: light.ledstrip
        content: Ledstrip
        card_mod:
          style: |
            ha-card {
              --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('light.ledstrip', 'on') 
             else 'rgba(100, 0, 200, 0.5)' }};
              padding: 5px!important;
              border-radius: 100px!important;
            }
      - type: template
        entity: switch.sonoff_10005fcd55
        content: Kast is {{ states ('switch.sonoff_10005fcd55')}}
        icon_color: |-
          {% if is_state('switch.sonoff_10005fcd55', 'on')
          %}                            
            amber                    
          {% else %}
            grey
          {% endif %}
        icon: |-
          {% if is_state('switch.sonoff_10005fcd55', 'on')
          %}                            
            mdi:lightbulb-on                      
          {% else %}
            mdi:lightbulb-off
          {% endif %}
        tap_action:
          action: toggle
    card_mod:
      style: |
        ha-state-icon {
          {{ 'animation: illumination 2s infinite;' if is_state('switch.sonoff_10005fcd55', 
            'on') }}
          }
        @keyframes illumination {
          80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 
         21%, 77% 35%, 79% 57%, 99% 100%); }
         }
styles:
grid:
  - grid-template-areas: '"n btn " "s btn" "i btn"'
  - grid-template-columns: 1fr 1fr min-content
  - grid-template-rows: min-content min-content 1fr
card:
  - padding: 22px 8px 22px
  - height: 280px
custom_fields:
  btn:
    - justify-content: end
    - align-self: start
    - padding-top: 20px
name:
  - justify-self: start
  - align-self: start
  - font-size: 12px
  - font-weight: 1000
  - color: pink
state:
  - justify-self: start
  - align-self: start
  - font-size: 14px
  - opacity: 0.7
img_cell:
  - justify-content: start
  - position: absolute
  - width: 100px
  - height: 100px
  - left: 0
  - bottom: 0
  - margin: 0 0 -30px -30px
  - background: '#FFC47E'
  - border-radius: 500px
icon:
  - position: relative
  - width: 100px
  - color: black
  - opacity: 0.6
  

[LiQuid_cOOled]

Mushroom chips require different code to animate when more than one is used.

Your code still isn’t formatted correctly. The indentions are off.

Here is an example of animation code for multiple chips

type: custom:button-card
show_state: true
name: Woonkamer
icon: mdi:sofa
style: |
  ha-card {
   background-color: rgba(0,0,0,0);
   box-shadow: none;
   border: 60px;
    }
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          icon: mdi:lamp
          entity: switch.kitchen_lights
          content: Kast
          secondary: '{{ states ("switch.sonoff_10005fcd55")}}'
          color: black
          card_mod:
            style: |
              ha-card {
                --chip-background: {{'rgba(0, 255, 0, 1)'if 
                   is_state('switch.sonoff_10006f5960', 'on') else 'rgba(230, 0, 0, 0.5)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }
        - type: template
          tap_action:
            action: toggle
          icon: mdi:radiator-disabled
          entity: switch.sonoff_10005fcd55
          content: Schouw
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(0, 255, 0, 1)' if 
                  is_state('switch.sonoff_10005fcd55', 'on') else 'rgba(230, 100, 0, 0.5)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }
        - type: template
          tap_action:
            action: toggle
          icon: mdi:led-strip-variant
          entity: light.ledstrip
          content: Ledstrip
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('light.ledstrip', 'on') 
               else 'rgba(100, 0, 200, 0.5)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }
        - type: template
          entity: switch.sonoff_10005fcd55
          content: Kast is {{ states ('switch.kitchen_lights')}}
          icon_color: |-
            {% if is_state('switch.sonoff_10005fcd55', 'on')
            %}                            
              amber                    
            {% else %}
              grey
            {% endif %}
          icon: |-
            {% if is_state('switch.kitchen_lights', 'on')
            %}                            
              mdi:lightbulb-on                      
            {% else %}
              mdi:lightbulb-off
            {% endif %}
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                 --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('light.ledstrip', 'on') 
                else 'rgba(20, 140, 100, 0.5)' }};
                 padding: 5px!important;
                 border-radius: 100px!important;
               } 
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$: |
            ha-state-icon {
              {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.kitchen_lights', 'on') }}
              transform-origin: 50% 75%;
            }
            @keyframes bounce {
              0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
              40% { transform: translateY(-1.2px) rotate(5deg); } 
              60% { transform: translateY(-1.1px) rotate(-4deg); } 
            } 
            @keyframes wash {
              50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
            }
          mushroom-template-chip:nth-child(2)$: |
            ha-state-icon {
              {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.kitchen_lights', 'on') }}
              transform-origin: 50% 75%;
            }
            @keyframes bounce {
              0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
              40% { transform: translateY(-1.2px) rotate(5deg); } 
              60% { transform: translateY(-1.1px) rotate(-4deg); } 
            } 
            @keyframes wash {
              50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
            } 
          mushroom-template-chip:nth-child(3)$: |
            ha-state-icon {
              {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.kitchen_lights', 'on') }}
              transform-origin: 50% 75%;
            }
            @keyframes bounce {
              0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
              40% { transform: translateY(-1.2px) rotate(5deg); } 
              60% { transform: translateY(-1.1px) rotate(-4deg); } 
            } 
            @keyframes wash {
              50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
            }                
          mushroom-template-chip:nth-child(4)$: >
            ha-state-icon {

            {{ 'animation: illumination 2s infinite;' if
            is_state('switch.kitchen_lights', 

            'on') }}
              }
            @keyframes illumination {
             80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 
             21%, 77% 35%, 79% 57%, 99% 100%); }
             }  
styles:
  grid:
    - grid-template-areas: '"n btn " "s btn" "i btn"'
    - grid-template-columns: 1fr 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  card:
    - padding: 22px 8px 22px
    - height: 280px
      custom_fields:
        btn:
          - justify-content: end
          - align-self: start
          - padding-top: 20px
        name:
          - justify-self: start
          - align-self: start
          - font-size: 12px
          - font-weight: 1000
          - color: pink
        state:
          - justify-self: start
          - align-self: start
          - font-size: 14px
          - opacity: 0.7
        img_cell:
          - justify-content: start
          - position: absolute
          - width: 100px
          - height: 100px
          - left: 0
          - bottom: 0
          - margin: 0 0 -30px -30px
          - background: '#FFC47E'
          - border-radius: 500px
        icon:
          - position: relative
          - width: 100px
          - color: black
          - opacity: 0.6

[olieter]

not working

type: custom:button-card
show_state: true
name: Woonkamer
icon: mdi:sofa
style: |
  ha-card {
   background-color: rgba(0,0,0,0);
   box-shadow: none;
   border: 60px;
    }
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          icon: mdi:lamp
          entity: switch.kitchen_lights
          content: Kast
          secondary: '{{ states ("switch.sonoff_10005fcd55")}}'
          color: black
          card_mod:
            style: |
              ha-card {
                --chip-background: {{'rgba(0, 255, 0, 1)'if 
                   is_state('switch.sonoff_10006f5960', 'on') else 'rgba(230, 0, 0, 0.5)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }
        - type: template
          tap_action:
            action: toggle
          icon: mdi:radiator-disabled
          entity: switch.sonoff_10005fcd55
          content: Schouw
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(0, 255, 0, 1)' if 
                  is_state('switch.sonoff_10005fcd55', 'on') else 'rgba(230, 100, 0, 0.5)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }
        - type: template
          tap_action:
            action: toggle
          icon: mdi:led-strip-variant
          entity: light.ledstrip
          content: Ledstrip
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('light.ledstrip', 'on') 
               else 'rgba(100, 0, 200, 0.5)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }
        - type: template
          entity: switch.sonoff_10005fcd55
          content: Kast is {{ states ('switch.kitchen_lights')}}
          icon_color: |-
            {% if is_state('switch.sonoff_10005fcd55', 'on')
            %}                            
              amber                    
            {% else %}
              grey
            {% endif %}
          icon: |-
            {% if is_state('switch.kitchen_lights', 'on')
            %}                            
              mdi:lightbulb-on                      
            {% else %}
              mdi:lightbulb-off
            {% endif %}
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                 --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('light.ledstrip', 'on') 
                else 'rgba(20, 140, 100, 0.5)' }};
                 padding: 5px!important;
                 border-radius: 100px!important;
               } 
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$: |
            ha-state-icon {
              {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.kitchen_lights', 'on') }}
              transform-origin: 50% 75%;
            }
            @keyframes bounce {
              0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
              40% { transform: translateY(-1.2px) rotate(5deg); } 
              60% { transform: translateY(-1.1px) rotate(-4deg); } 
            } 
            @keyframes wash {
              50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
            }
          mushroom-template-chip:nth-child(2)$: |
            ha-state-icon {
              {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.kitchen_lights', 'on') }}
              transform-origin: 50% 75%;
            }
            @keyframes bounce {
              0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
              40% { transform: translateY(-1.2px) rotate(5deg); } 
              60% { transform: translateY(-1.1px) rotate(-4deg); } 
            } 
            @keyframes wash {
              50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
            } 
          mushroom-template-chip:nth-child(3)$: |
            ha-state-icon {
              {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.kitchen_lights', 'on') }}
              transform-origin: 50% 75%;
            }
            @keyframes bounce {
              0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
              40% { transform: translateY(-1.2px) rotate(5deg); } 
              60% { transform: translateY(-1.1px) rotate(-4deg); } 
            } 
            @keyframes wash {
              50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
            }                
          mushroom-template-chip:nth-child(4)$: >
            ha-state-icon {

            {{ 'animation: illumination 2s infinite;' if
            is_state('switch.kitchen_lights', 

            'on') }}
              }
            @keyframes illumination {
             80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 
             21%, 77% 35%, 79% 57%, 99% 100%); }
             }  
styles:
  grid:
    - grid-template-areas: '"n btn " "s btn" "i btn"'
    - grid-template-columns: 1fr 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  card:
    - padding: 22px 8px 22px
    - height: 280px
      custom_fields:
        btn:
          - justify-content: end
          - align-self: start
          - padding-top: 20px
        name:
          - justify-self: start
          - align-self: start
          - font-size: 12px
          - font-weight: 1000
          - color: pink
        state:
          - justify-self: start
          - align-self: start
          - font-size: 14px
          - opacity: 0.7
        img_cell:
          - justify-content: start
          - position: absolute
          - width: 100px
          - height: 100px
          - left: 0
          - bottom: 0
          - margin: 0 0 -30px -30px
          - background: '#FFC47E'
          - border-radius: 500px
        icon:
          - position: relative
          - width: 100px
          - color: black
          - opacity: 0.6

[/quote]

type: custom:button-card
show_state: true
name: Woonkamer
icon: mdi:sofa
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          icon: mdi:lamp
          entity: switch.sonoff_10006f5960
          content: Kast
          color: black
          card_mod:
            style: |
              ha-card {
                --chip-background: {{'rgba(0, 255, 0, 1)' if is_state('switch.sonoff_10006f5960', 'on') else 'rgba(230, 0, 0, 0.5)' }};
                padding: 5px!important;
                border-radius: 100px!important;
                  }
        - type: template
          tap_action:
            action: toggle
          icon: mdi:radiator-disabled
          entity: switch.sonoff_10005fcd55
          content: Schouw
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('switch.sonoff_10005fcd55', 'on') else 'rgba(230, 100, 0, 0.5)' }};
                padding: 5px!important;
                border-radius: 100px!important;
                  }
        - type: template
          tap_action:
            action: toggle
          icon: mdi:led-strip-variant
          entity: light.ledstrip
          content: Ledstrip
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('light.ledstrip', 'on') else 'rgba(100, 0, 200, 0.5)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }
        - type: template
          entity: switch.sonoff_10005fcd55
          content: Kast is {{ states ('switch.sonoff_10005fcd55')}}
          icon_color: >-
            {% if is_state('switch.sonoff_10005fcd55',
            'on')%}                            
              amber                    
            {% else %}
              grey
            {% endif %}
          icon: >-
            {% if is_state('switch.sonoff_10005fcd55',
            'on')%}                            
              mdi:lightbulb-on                      
            {% else %}
              mdi:lightbulb-off
            {% endif %}
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                 --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('light.ledstrip', 'on') 
                 else 'rgba(20, 140, 100, 0.5)' }};
                 padding: 5px!important;
                 border-radius: 100px!important;
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
            {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.sonoff_10006f5960', 'on') }}
            transform-origin: 50% 75%;
              }
          @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
            40% { transform: translateY(-1.2px) rotate(5deg); } 
            60% { transform: translateY(-1.1px) rotate(-4deg); } 
              } 
          @keyframes wash {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
              }
        mushroom-template-chip:nth-child(2)$: |
          ha-state-icon {
            {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.kitchen_lights', 'on') }}
            transform-origin: 50% 75%;
              }
          @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
            40% { transform: translateY(-1.2px) rotate(5deg); } 
            60% { transform: translateY(-1.1px) rotate(-4deg); } 
              } 
          @keyframes wash {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
             } 
        mushroom-template-chip:nth-child(3)$: |
          ha-state-icon {
            {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.sonoff_10005fcd55', 'on') }}
            transform-origin: 50% 75%;
              }
          @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
            40% { transform: translateY(-1.2px) rotate(5deg); } 
            60% { transform: translateY(-1.1px) rotate(-4deg); } 
              } 
          @keyframes wash {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
              }                
        mushroom-template-chip:nth-child(4)$: |
          ha-state-icon {
            {{ 'animation: illumination 2s infinite;' if is_state('switch.sonoff_10005fcd55', 'on') }}
              }
          @keyframes illumination {
            80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 
            21%, 77% 35%, 79% 57%, 99% 100%); }
              }  
styles:
  grid:
    - grid-template-areas: '"n btn " "s btn" "i btn"'
    - grid-template-columns: 1fr 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  card:
    - font-size: 18px
    - background: radial-gradient(rgb(18, 81, 219, 50%), rgb(0,0,0, 50&))
    - border: 10px solid rgb(18, 81, 219, 50%)
    - padding: 22px 8px 22px
    - height: 330px
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
      - padding-top: 50px
  name:
    - justify-self: start
    - position: absolute
    - align-self: start
    - font-size: 16px
    - top: 12px
    - font-weight: 1000
    - color: pink
  state:
    - justify-self: start
    - align-self: start
    - font-size: 14px
    - opacity: 0.7
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 100px
    - height: 100px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -30px
    - background: '#FFC47E'
    - border-radius: 500px
  icon:
    - position: relative
    - width: 120px
    - color: black
    - opacity: 0.6

[olieter]

still not working

[LiQuid_cOOled]

Help me a little bud. You need to switch to your devices/entities.

[olieter]

i now and card mod is installed

[LiQuid_cOOled]

Is it working?

[olieter]

no not working in chip card

when i put this code in template-card its work

card_mod:
              style: |
                ha-card {
                      box-shadow: 0px 0px;
                    }
                ha-state-icon {
                   {{ 'animation: illumination 2s infinite;' if is_state('switch.sonoff_10005fcd55', 'on') }}
                     }
                @keyframes illumination {
                   0%, 45%, 55%, 100% { transform: translateY(0) scale(1); clip-path: polygon(20% 100%, 21% 38%, 36% 22%, 62% 21%, 79% 37%, 80% 100%,            53% 100%, 55% 67%, 62% 62%, 66% 55%, 67% 46%, 62% 38%, 55% 34%, 47% 34%, 39% 37%, 34% 44%, 33% 53%, 36% 60%, 41% 64%, 45% 66%, 45%            76%, 56% 76%, 54% 100%); }
                   10%, 40% { transform: translateY(-5px) scale(1.12); clip-path: inset(0 0 0 0); }
                   50% { transform: translateY(-2px) }
                      }

[LiQuid_cOOled]

I gave you the chip animation code in a earlier post.

card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
            {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.sonoff_10006f5960', 'on') }}
            transform-origin: 50% 75%;
              }
          @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
            40% { transform: translateY(-1.2px) rotate(5deg); } 
            60% { transform: translateY(-1.1px) rotate(-4deg); } 
              } 
          @keyframes wash {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
              }
        mushroom-template-chip:nth-child(2)$: |
          ha-state-icon {
            {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.sonoff_10005fcd55', 'on') }}
            transform-origin: 50% 75%;
              }
          @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
            40% { transform: translateY(-1.2px) rotate(5deg); } 
            60% { transform: translateY(-1.1px) rotate(-4deg); } 
              } 
          @keyframes wash {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
             } 
        mushroom-template-chip:nth-child(3)$: |
          ha-state-icon {
            {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.sonoff_10005fcd55', 'on') }}
            transform-origin: 50% 75%;
              }
          @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
            40% { transform: translateY(-1.2px) rotate(5deg); } 
            60% { transform: translateY(-1.1px) rotate(-4deg); } 
              } 
          @keyframes wash {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
              }                
        mushroom-template-chip:nth-child(4)$: |
          ha-state-icon {
            {{ 'animation: illumination 2s infinite;' if is_state('switch.sonoff_10005fcd55', 'on') }}
              }
          @keyframes illumination {
            80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 
            21%, 77% 35%, 79% 57%, 99% 100%); }
              }  

[olieter]

i get it to work i remove “transform-origin: 50% 75%;” then its work ,
thank, for the good info

card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
       {{ 'animation: illumination 2s infinite; ; ' if is_state('light.schouw_lampjes', 'on') }}
            
              }
       @keyframes illumination {
        0%, 45%, 55%, 100% { transform: translateY(0) scale(1); clip-path: polygon(20% 100%, 21% 38%, 36% 22%, 62% 21%, 79% 37%, 80% 100%, 53% 100%, 55% 67%, 62% 62%, 66% 55%, 67% 46%, 62% 38%, 55% 34%, 47% 34%, 39% 37%, 34% 44%, 33% 53%, 36% 60%, 41% 64%, 45% 66%, 45% 76%, 56% 76%, 54% 100%); }
        10%, 40% { transform: translateY(-5px) scale(1.12); clip-path: inset(0 0 0 0); }
        50% { transform: translateY(-2px) }       
           

[olieter]

its work only on stand standalone chip card, when i put it in this code its not working .
Some solution ?

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: KAMERS
  - square: false
    type: grid
    cards:
      - type: custom:button-card
        show_state: true
        name: Woonkamer
        icon: mdi:sofa
        custom_fields:
          btn:
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:lamp
                  entity: switch.sonoff_10006f5960
                  content: Kast
                  color: black
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{'rgba(0, 255, 0, 1)' if is_state('switch.sonoff_10006f5960', 'on') else 'rgba(230, 0, 0, 0.5)' }};
                        padding: 5px!important;
                        border-radius: 100px!important;
                          }
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:radiator-disabled
                  entity: switch.sonoff_10005fcd55
                  content: Schouw
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('switch.sonoff_10005fcd55', 'on') else 'rgba(230, 100, 0, 0.5)' }};
                        padding: 5px!important;
                        border-radius: 100px!important;
                          }
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:led-strip-variant
                  entity: light.ledstrip
                  content: Ledstrip
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('light.ledstrip', 'on') else 'rgba(100, 0, 200, 0.5)' }};
                        padding: 5px!important;
                        border-radius: 100px!important;
                      }
                - type: template
                  entity: switch.sonoff_10005fcd55
                  content: Kast is {{ states ('switch.sonoff_10005fcd55')}}
                  icon_color: >-
                    {% if
                    is_state('switch.sonoff_10005fcd55','on')%}                            
                      amber                    
                    {% else %}
                      grey
                    {% endif %}
                  icon: >-
                    {% if is_state('switch.sonoff_10005fcd55',
                    'on')%}                            
                      mdi:lightbulb-on                      
                    {% else %}
                      mdi:lightbulb-off
                    {% endif %}
                  tap_action:
                    action: toggle
                  card_mod:
                    style: |
                      ha-card {
                         --chip-background: {{ 'rgba(0, 255, 0, 1)' if is_state('light.zijkant', 'on') 
                         else 'rgba(20, 140, 100, 0.5)' }};
                         padding: 5px!important;
                         border-radius: 100px!important;
            card_mod:
              style:
                mushroom-template-chip:nth-child(1)$: |
                  ha-state-icon {
                    {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.sonoff_10006f5960', 'on') }}
                    transform-origin: 50% 75%;
                      }
                  @keyframes bounce {
                    0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
                    40% { transform: translateY(-1.2px) rotate(5deg); } 
                    60% { transform: translateY(-1.1px) rotate(-4deg); } 
                      } 
                  @keyframes wash {
                    50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
                      }
                mushroom-template-chip:nth-child(2)$: |
                  ha-state-icon {
                    {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.kitchen_lights', 'on') }}
                    transform-origin: 50% 75%;
                      }
                  @keyframes bounce {
                    0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
                    40% { transform: translateY(-1.2px) rotate(5deg); } 
                    60% { transform: translateY(-1.1px) rotate(-4deg); } 
                      } 
                  @keyframes wash {
                    50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
                     } 
                mushroom-template-chip:nth-child(3)$: |
                  ha-state-icon {
                    {{ 'animation: bounce 1.5s ease-in-out infinite; ' if is_state('switch.sonoff_10005fcd55', 'on') }}
                    transform-origin: 50% 75%;
                      }
                  @keyframes bounce {
                    0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
                    40% { transform: translateY(-1.2px) rotate(5deg); } 
                    60% { transform: translateY(-1.1px) rotate(-4deg); } 
                      } 
                  @keyframes wash {
                    50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
                      }                
                mushroom-template-chip:nth-child(4)$: |
                  ha-state-icon {
                    {{ 'animation: illumination 2s infinite;' if is_state('light.zijkant', 'on') }}
                      }
                  @keyframes illumination {
                    80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 
                    21%, 77% 35%, 79% 57%, 99% 100%); }
                      }  
        styles:
          grid:
            - grid-template-areas: '"n btn " "s btn" "i btn"'
            - grid-template-columns: 1fr 1fr min-content
            - grid-template-rows: min-content min-content 1fr
          card:
            - font-size: 18px
            - background: radial-gradient(rgb(18, 81, 219, 50%), rgb(0,0,0, 50&))
            - border: 10px solid rgb(18, 81, 219, 50%)
            - padding: 22px 8px 22px
            - height: 330px
          custom_fields:
            btn:
              - justify-content: end
              - align-self: start
              - padding-top: 50px
          name:
            - justify-self: start
            - position: absolute
            - align-self: start
            - font-size: 16px
            - top: 12px
            - font-weight: 1000
            - color: pink
          state:
            - justify-self: start
            - align-self: start
            - font-size: 14px
            - opacity: 0.7
          img_cell:
            - justify-content: start
            - position: absolute
            - width: 100px
            - height: 100px
            - left: 0
            - bottom: 0
            - margin: 0 0 -30px -30px
            - background: '#FFC47E'
            - border-radius: 500px
          icon:
            - position: relative
            - width: 120px
            - color: black
            - opacity: 0.6
      - type: custom:button-card
    columns: 2

[olieter]

i found a solution ( its the same look of card without costum fields another styl code )

is working now yesyesyes

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: light.living_all
    icon: mdi:bed
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Living
    secondary: >-
      {{ states('sensor.thermostat_master_bedroom_local_temperature') | round(0)
      }}°C | {{ states('sensor.thermostat_master_bedroom_humidity') | round(0)
      }}%
    layout: horizontal
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    badge_icon: >
      {% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
      'heating') %}
        mdi:radiator
      {% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
      'cooling') %}
        mdi:snowflake
      {% else %}  {% endif %}
    badge_color: >
      {% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
      'heating') %}
        red
      {% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
      'cooling') %}
        #03A9F4
      {% else %} {% endif %}
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-size: 25px !important;
            position: relative;
            top: -65px;
            left: -155px;
            overflow: visible !important;
            white-space: normal !important;
          }
          .secondary {
            position: relative;
            overflow: visible !important;
            top: -52px;
            left: -155px;
          }
        mushroom-shape-icon$: |
          .shape {
            position: relative;
            left: -70px;
            top: 55px;
          }
        .: |
          :host {
            --mush-icon-size: 146px;
            --secondary-text-color: 
              {% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'heating') %}
                red
              {% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'cooling') %}
                #03A9F4
              {% else %}
                #6c6c75
              {% endif %}
          }
        style: |
          mushroom-badge-icon {
            left: px;
            right: 170px
            top: 25px;
          }
  - type: custom:mushroom-template-card
    primary: kast
    secondary: '{{ states ("light.schouw_lampjes")}}'
    icon_color: none
    icon: |-
      {% if is_state(entity, 'on') %} 
       mdi:lightbulb-on
      {% elif is_state(entity, 'off') %} 
       mdi:lightbulb-off
      {% else %}
       mdi:lightbulb-off
      {% endif %}
    entity: light.schouw_lampjes
    tap_action:
      action: toggle
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% if is_state(config.entity, 'on') %}
              {% if state_attr(config.entity, 'rgb_color') == none %}
                --icon-color: yellow !important;
                --shape-color: rgba(255, 190, 137, 0.2) !important;
                --icon-animation: illumination 2s infinite;
              {% else %}
                --card-mod-icon: mdi:lightbulb-off;
                {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                --icon-color: rgb({{ r }}, {{ g }}, {{ b }}) !important;
                --shape-color: rgba({{ r }}, {{ g }}, {{ b }}, 0.2) !important;
               {% endif %}
            {% endif %}
          }
                @keyframes illumination {
                   0%, 45%, 55%, 100% { transform: translateY(0) scale(1); clip-path: polygon(20% 100%, 21% 38%, 36% 22%, 62% 21%, 79% 37%, 80% 100%,            53% 100%, 55% 67%, 62% 62%, 66% 55%, 67% 46%, 62% 38%, 55% 34%, 47% 34%, 39% 37%, 34% 44%, 33% 53%, 36% 60%, 41% 64%, 45% 66%, 45%            76%, 56% 76%, 54% 100%); }
                   10%, 40% { transform: translateY(-5px) scale(1.12); clip-path: inset(0 0 0 0); }
                   50% { transform: translateY(-2px) }
                      }
        style: |
          ha-state-icon {
            {{ 'animation: illumination 2s infinite;' if is_state('switch.sonoff_10005fcd55', 'on') }}
               }
          @keyframes illumination {
            0%, 45%, 55%, 100% { transform: translateY(0) scale(1); clip-path: polygon(20% 100%, 21% 38%, 36% 22%, 62% 21%, 79% 37%, 80% 100%,            53% 100%, 55% 67%, 62% 62%, 66% 55%, 67% 46%, 62% 38%, 55% 34%, 47% 34%, 39% 37%, 34% 44%, 33% 53%, 36% 60%, 41% 64%, 45% 66%, 45%            76%, 56% 76%, 54% 100%); }
            10%, 40% { transform: translateY(-5px) scale(1.12); clip-path: inset(0 0 0 0); }
            50% { transform: translateY(-2px) }
               }
        .: |
          ha-card {
            height: 20px
            width: 66px;
            margin-left: 45%;
            top: -170px;
            left: 20px
            border: 2.5px outset blue
            background: none;
          }
          :host {
            --mush-icon-size: 45px;
          }           

                 
card_mod:
  style: |
    ha-card {
     
      
      background-size: 100% 100%;
      height: 200px !important;
      width: 250px !important;
    }