Thank you, I have now finished my front page weather card with changing (animated) icons for each weather condition 
- type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
cards:
- type: grid
columns: 2
square: false
cards:
- type: grid
columns: 1
square: false
cards:
- type: custom:mushroom-template-card
entity: weather.buienradar
icon: mdi:help
icon_color: '#03A9F4'
layout: vertical
primary: '{{ state_attr(entity, "temperature") }} Ā°C'
secondary: '{{ state_attr(entity, "humidity") }} %'
tap_action:
action: navigate
navigation_path: buiten
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
mushroom-shape-icon {
display: flex;
{% set weer_type = states('weather.buienradar') %}
{% if weer_type == 'cloudy' %}
--card-mod-icon: mdi:weather-cloudy;
animation: cloudy 10s ease-in-out infinite;
{% elif weer_type == 'exceptional' %}
--card-mod-icon: mdi:alert-outline;
animation: cloudy 10s ease-in-out infinite;
{% elif weer_type == 'fog' %}
--card-mod-icon: mdi:weather-fog;
animation: cloudy 10s ease-in-out infinite, fog 4s infinite;
{% elif weer_type == 'hail' %}
--card-mod-icon: mdi:weather-hail;
animation: cloudy 10s ease-in-out infinite, hail 2s infinite;
{% elif weer_type == 'lightning' %}
--card-mod-icon: mdi:weather-lightning;
animation: cloudy 10s ease-in-out infinite, lightning 4s infinite;
{% elif weer_type == 'lightning_rainy' %}
--card-mod-icon: mdi:weather-lightning-rainy;
animation: cloudy 10s ease-in-out infinite;
{% elif weer_type == 'partlycloudy' %}
{% if states['sun.sun'].state == 'below_horizon' %}
--card-mod-icon: mdi:weather-night-partly-cloudy;
animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
{% else %}
--card-mod-icon: mdi:weather-partly-cloudy;
animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
{% endif %}
{% elif weer_type == 'pouring' %}
--card-mod-icon: mdi:weather-pouring;
animation: cloudy 10s ease-in-out infinite, pouring 1s infinite;
{% elif weer_type == 'rainy' %}
--card-mod-icon: mdi:weather-rainy;
animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
{% elif weer_type == 'snowy' %}
--card-mod-icon: mdi:weather-snowy;
animation: cloudy 10s ease-in-out infinite, snow 4s infinite;
{% elif weer_type == 'snowy_rainy' %}
--card-mod-icon: mdi:weather-snowy-rainy;
animation: cloudy 10s ease-in-out infinite;
{% elif weer_type == 'sunny' %}
{% if states['sun.sun'].state == 'below_horizon' %}
--card-mod-icon: mdi:weather-night;
animation: moon 10s linear infinite, stars 5s linear infinite;
{% else %}
--card-mod-icon: mdi:weather-sunny;
animation: sunny 8s ease-in-out infinite alternate;
{% endif %}
{% elif weer_type == 'windy' %}
--card-mod-icon: mdi:weather-windy;
animation: cloudy 10s ease-in-out infinite;
{% elif weer_type == 'windy_variant' %}
--card-mod-icon: mdi:weather-windy-variant;
animation: cloudy 10s ease-in-out infinite, wind 5s infinite;
{% else %}
--card-mod-icon: mdi:help;
{% endif %}
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes rain {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
@keyframes pouring {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%, 54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
}
@keyframes lightning {
10%, 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 69% 55%, 66% 40%, 48% 39%, 24% 100%, 0 100%); transform: scale(1.1); }
10.1%, 15.1% { clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes moon {
0%, 100% { transform: rotate(12deg); }
30% { transform: rotate(-6deg); }
45% { transform: rotate(8deg); }
75% { transform: rotate(-10deg); }
}
@keyframes stars {
0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
}
@keyframes wind {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: inset(0 0 37% 0); }
}
@keyframes snow {
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
51% { clip-path: inset(0 0 0 0); }
}
@keyframes hail {
0%, 26%, 51%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 47% 69%, 56% 55%, 43% 43%, 31% 58%, 48% 68%, 63% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 61% 86%, 74% 74%, 61% 60%, 46% 69%, 60% 87%, 63% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 56% 83%, 42% 68%, 27% 81%, 37% 100%, 0 100%); }
}
@keyframes fog {
0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%, 100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%); }
}
@keyframes sun {
50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
}
:host {
--mush-icon-size: 90px;
--mush-card-primary-font-size: 22px;
--mush-card-primary-font-weight: normal;
--mush-card-secondary-font-size: 16px;
--mush-card-secondary-font-weight: normal;
}
- type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: false
outer_padding: false
background: false
cards:
- type: picture-entity
entity: camera.buienradar
show_state: false
show_name: false
camera_view: auto
