punxxx
23. Februar 2024 um 09:39
1
Haloo Zusammen,
ich habe gestern ein par coole Beispiele für Mushroom-Cards inkl. Animationen gefunden. Ich habe es mal getestet.
So sollte es aussehen, allerdings wird bei mir nur der Hintergrund aber nicht das Icon animiert. Hat jemand eine Idee woran das liegt. Hier der Code:
type: custom:mushroom-template-card
icon: mdi:alarm-light
icon_color: red
primary: Alert
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: alert 0.8s infinite;
}
@keyframes alert {
0%, 100% { color: rgb(var(--rgb-orange)); }
50% { clip-path: polygon(0% 55%, 25% 55%, 25% 35%, 35% 25%, 50% 18%, 65% 20%, 75% 35%, 75% 55%, 100% 55%, 100% 100%, 0 100%); color: rgb(var(--rgb-red)); }
}
.shape {
--shape-animation: alert-shape 0.8s infinite;
}
@keyframes alert-shape {
0%, 100% { --shape-color: rgba(var(--rgb-orange), 0.2); }
60% { --shape-color: rgba(var(--rgb-red), 0.2); }
}
Viele Grüße
Beschäftige ich mich aktuell auch mit. Bin da ein kleines Spielkind, das sich an solchen Spielereien erfreut
Vielleicht hat es sich erledigt, aber vielleicht auch nicht. Die Syntax stimmt nicht ganz:
das $-Zeichen muss weg, aus „ha-icon“ wird „ha-state-icon“ und aus „–icon-animation“ wird nur „animation“
Dann gehts. Sieht dann am Ende so aus:
type: custom:mushroom-template-card
icon: mdi:alarm-light
icon_color: red
primary: Alert
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: alert 0.8s infinite;
}
@keyframes alert {
0%, 100% { color: rgb(var(--rgb-orange)); }
50% { clip-path: polygon(0% 55%, 25% 55%, 25% 35%, 35% 25%, 50% 18%, 65% 20%, 75% 35%, 75% 55%, 100% 55%, 100% 100%, 0 100%); color: rgb(var(--rgb-red)); }
}
.shape {
--shape-animation: alert-shape 0.8s infinite;
}
@keyframes alert-shape {
0%, 100% { --shape-color: rgba(var(--rgb-orange), 0.2); }
60% { --shape-color: rgba(var(--rgb-red), 0.2); }
}
2 „Gefällt mir“
Linos
10. Februar 2025 um 09:14
4
Danke für deinen Hinweis . So habe ich nach vielen probieren die Waschmaschine zum zappeln bekommen, wenn sie läuft
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
{% if is_state('sensor.waschcenter_waschmaschine_1_status', 'läuft') %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
{% endif %}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
ronhoo
10. Juni 2025 um 12:21
5
Ich habe unten einen Code für eine Duschanimation. Warum funktioniert er nicht?
type: custom:mushroom-template-card
icon: mdi:shower-head
icon_color: light-blue
primary: Shower
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 0.7s ease-out infinite;
}
@keyframes clip {
0% {clip-path: inset(0 0 45% 0); }
100% { clip-path: inset(0 0 0 0); }
tarag
10. Juni 2025 um 12:22
6
Wieso fragst Du das nicht den Ersteller?
Lass mich raten … Weil die KI es nicht hinbekommt?
Wenn man von Menschen etwas möchte, würde ich mehr erwarten, als dass man nur seine Code hinrotzt , mit der Aufforderung es zu korrigieren. Ein Hallo wäre ein Anfang gewesen.
Aber vielleicht hat ja dennoch jemand Erbarmen …
Mike70
11. Juni 2025 um 06:29
7
Ich würde mal die Antwort in Post #2 beachten und eventuell anwenden.
LG Michael
1 „Gefällt mir“
Hallo,
für eine Duschanimation kannst du meinen Code verwenden, aber denk daran, dass du meinen Sensor gegen deinen austauschen musst, damit es funktioniert.
type: custom:mushroom-template-card
icon: mdi:shower-head
icon_color: accent
primary: Duschen
card_mod:
style: |
ha-state-icon {
{% set k = states('input_boolean.duschen') %}
{% if (k == "on") %}
animation: clip 0.7s ease-in-out infinite, clip 1s infinite;
{% endif %}
}
@keyframes clip {
0% {clip-path: inset(0 0 45% 0); }
100% { clip-path: inset(0 0 0 0); }
}
Viel Spaß damit.
