Card che si muovono con la tua casa.
Anima qualsiasi blocco o proprietà di stile usando animazioni keyframe. Definisci transizioni personalizzate, attivale dallo stato dell'entità e crea card per dashboard che sembrano vive — senza scrivere una riga di CSS.
- Keyframe
- Editor animazioni
- Qualsiasi
- Blocchi o proprietà di stile
- Entità
- Animazioni attivate dallo stato
- Loop
- Continua o una tantum
Un editor animazioni visuale per le card
Apri l'editor animazioni dal pannello Stili e definisci animazioni keyframe interamente nell'interfaccia. Nessuna sintassi CSS, nessun codice — configura semplicemente stato iniziale, stato finale, easing, durata e trigger.
Seleziona un blocco
Seleziona qualsiasi blocco sul canvas e apri il pannello Stili. Scorri fino alla sezione Animazioni per iniziare.
Definisci i keyframe
Aggiungi stop keyframe a 0%, 50%, 100% (o qualsiasi percentuale). Imposta i valori di stile a ogni keyframe — l'editor interpola tra di loro.
Configura il timing
Imposta durata, ritardo, funzione di easing (lineare, ease-in, ease-out, cubic-bezier) e contatore iterazioni (una volta, loop o ping-pong).
Imposta il trigger
Scegli quando l'animazione viene eseguita: al caricamento della pagina, al passaggio del mouse, o guidata dallo stato dell'entità così si attiva quando la tua entità Home Assistant cambia.
Animazioni blocchi e animazioni di stile
CardBuilder Pro supporta due sistemi di animazione complementari — effetti di movimento a livello di blocco e animazioni di valori a livello di proprietà.
Animazioni Blocchi
Anima l'intero blocco come unità — effetti di entrata (fade in, slide in, scale), effetti di uscita e movimenti che catturano l'attenzione come pulse o bounce.
- Fade in / Fade out
- Slide in da qualsiasi direzione
- Scale up / Scale down
- Pulse, bounce, shake
Animazioni di Stile
Anima singole proprietà di stile — colore, sfondo, opacità, bordo, ombra, transform — tramite una timeline keyframe per un controllo preciso.
- Transizioni di colore tra stati
- Effetto "respiro" dell'opacità
- Transform: ruota, trasla, scala
- Pulsazione box-shadow
Animazioni guidate dallo stato live delle entità
Collega lo stato attivo di un'animazione a un'entità Home Assistant. L'animazione si avvia quando l'entità soddisfa una condizione — e si ferma o si inverte quando non la soddisfa.
Pulse allarme
Un blocco pulsa in rosso quando un'entità allarme è nello stato "triggered". L'animazione si ferma nel momento in cui l'allarme viene disinserito.
Progresso lavatrice
Anima un blocco indicatore di avanzamento mentre l'entità lavatrice è nello stato "washing". Si blocca quando il ciclo termina.
Indicatore presenza
Una delicata animazione di bagliore "respiro" viene eseguita su un blocco persona quando è a casa, e svanisce quando va via.
Stato di caricamento
Mostra un'animazione spinner rotante su un blocco mentre un'entità script o automazione è in esecuzione, poi nascondila al completamento.
Dai vita al tuo dashboard.
Le animazioni blocchi e di stile sono disponibili con i piani CardBuilder Pro.