← All Features · PRO Feature

Cards That Move with Your Home.

Animate any block or style property using keyframe-based animations. Define custom transitions, trigger them from entity state, and create dashboard cards that feel alive — all without writing a line of CSS.

Upgrade to Pro View all features

Animation editor showing a keyframe timeline for a block fade-in animation

Keyframe: Animation editor
Any: Block or style property
Entity: State-triggered animations
Loop: Continuous or one-shot

How Animations Work

A Visual Animation Editor Built for Cards

Open the animation editor from the Styles panel and define keyframe animations entirely in the UI. No CSS syntax, no code — just configure start state, end state, easing, duration, and trigger.

Animation editor panel with keyframe timeline and property controls

Select a block

Select any block on the canvas and open the Styles panel. Scroll to the Animations section to start.

Define keyframes

Add keyframe stops at 0%, 50%, 100% (or any percentage). Set the style values at each keyframe — the editor interpolates between them.

Configure timing

Set duration, delay, easing function (linear, ease-in, ease-out, cubic-bezier), and iteration count (once, loop, or ping-pong).

Set the trigger

Choose when the animation runs: on page load, on hover, or driven by entity state so it activates when your Home Assistant entity changes.

Animation Types

Block Animations & Style Animations

CardBuilder Pro supports two complementary animation systems — block-level motion effects and property-level value animations.

Block Animations

Animate the entire block as a unit — entrance effects (fade in, slide in, scale), exit effects, and attention-grabbing motion like pulse or bounce.

Fade in / Fade out
Slide in from any direction
Scale up / Scale down
Pulse, bounce, shake

Style Animations

Animate individual style properties — color, background, opacity, border, shadow, transform — through a keyframe timeline for precise control.

Color transitions between states
Opacity breathing effect
Transform: rotate, translate, scale
Box-shadow pulsing

Entity-Triggered Animations

Animations Driven by Live Entity State

Bind an animation's active state to a Home Assistant entity. The animation plays when the entity meets a condition — and stops or reverses when it doesn't.

Animation trigger panel showing entity condition binding with state value and comparison operator

Alarm pulse

A block pulses red when an alarm entity is in "triggered" state. The animation stops the moment the alarm is disarmed.

Washing machine progress

Animate a progress indicator block while the washing machine entity is in "washing" state. It freezes when the cycle ends.

Presence indicator

A gentle breathing glow animation plays on a person block when they are home, and fades out when they leave.

Loading state

Show a rotating spinner animation on a block while a script or automation entity is running, then hide it on completion.

Make Your Dashboard Come Alive.

Block and style animations are available with CardBuilder Pro plans.

See Plans Read the Docs