Motion as data

An animation is easy to hard-code in a component and hard to reuse consistently. A more durable approach describes the motion as data: what changes, when it changes, how interpolation is timed, and what the system should do when a user pauses, reverses or seeks.

Describe first; execute later.

PFx CSS Motion Core defines a versioned motion schema containing an ID, timing properties and keyframes. A motion describes duration, delay, iteration count, direction, fill and easing without asking for a browser element. Validation and keyframe normalization run before a compiler or player sees the definition. This separation lets the same declared effect be inspected, tested or exported without creating a DOM node.

One definition, multiple outputs.

The CSS compiler produces deterministic class and keyframe names, validates property identifiers and unsafe values, then emits @keyframes and explicit animation properties. It deliberately rejects features it cannot represent faithfully in CSS, including endDelay and certain additive compositions, rather than silently dropping them. Browser support and property-specific CSS validity are still the browser's responsibility.

The optional browser adapter converts a validated definition into native Web Animations API keyframes and timing. It exposes play, pause, reverse, seek, playback rate and disposal controls, and can arrange several effects on a common timeline. The pure core can be imported without a DOM; the adapter only needs an actual element when it creates an animation.

A timeline needs explicit time.

The separate playback state machine accepts caller-supplied timestamps. It holds a current time, rate, loop flag and status, and calculates its next state from an injected time rather than creating a hidden interval. That is useful for deterministic tests and for tools that need scrubbing, editing or coordinated playback. It is not a second animation loop competing with the browser.

A stable contract has limits.

The repository calls its v1.0.0 API a stable candidate, with compatibility tests for its public exports. This does not mean every CSS property can be compiled or every easing syntax is accepted. Versioned source archives are provided through GitHub Releases without automatic npm publication. The interactive panel below demonstrates native Web Animations API playback and seeking, illustrating the browser adapter's design rather than importing the core directly.