Das Home Assistant Dashboard ist funktional, aber oft ziemlich statisch. Mit ein paar CSS-Animationen ändert sich das: blinkende Icons bei aktivem Stromverbrauch, Bewegung bei laufenden Geräten. Im Video zeige ich, wie du Mushroom Cards mit CSS zum Leben erweckst.
Was animierte Karten bringen
Animationen sind mehr als Spielerei. Ein blinkendes Icon signalisiert dir auf einen Blick, dass die Steckdose gerade Strom zieht oder ein Vorgang läuft. Du musst keine Zahlen oder kleinen Statusanzeigen entziffern. Gerade bei häufig genutzten Geräten wie Steckdosen, Heizungen oder der Waschmaschine verbessert das die Übersicht deutlich, und die Bedienung wird nebenbei angenehmer.
Mushroom Cards plus CSS
Als Basis nutze ich die Mushroom Cards, eine Kartensammlung mit moderner Optik und vielen Anpassungsmöglichkeiten. Die Installation läuft über HACS. Wichtig: Installiere sowohl das Hauptpaket als auch die Mushroom Themes. Details und Installationshinweise stehen im offiziellen Repository der Mushroom Cards.
Die Animationen selbst kommen nicht aus einer zusätzlichen Erweiterung, sondern direkt aus CSS. Der Browser interpretiert die Regeln, dein System bleibt schlank und wartungsarm. Mit den richtigen CSS-Regeln blinken, wackeln oder drehen sich die Icons, und die Methode lässt sich unkompliziert auf verschiedene Karten übertragen. Die Beispiele aus dem Video findest du im Projekt HA Animated Cards. Wie du Karten grundsätzlich bearbeitest, zeigt dir der Dashboard-UI-Guide.
