CSS properties
Transforms and opacity are the properties that animate cheaply, and most of this library is about them. This page is the other half: Bmotion's typed props reach across the whole style surface - typography, spacing, positioning, clipping and backgrounds - the cssVars bag animates CSS custom properties, and the generic css bag animates anything else by name. These are the ones that trigger layout or paint rather than compositing, so they are worth spending deliberately. Each group below toggles on its own.
Typography
letterSpacing, fontSize and lineHeight interpolate like any length.
Spacing
gap animates on a flex/grid container; padding grows a box from the inside; margin pushes it within its track.
Positioning
Animate top, left, right and bottom on a positioned element.
Clipping & backgrounds
clipPath, backgroundPosition and backgroundSize interpolate their numeric parts frame by frame.
Generic Css escape hatch
The css bag animates any CSS property by name (dash- or camelCase) - the equivalent of motion.dev's animate().
CSS custom properties
cssVars writes CSS custom properties (keys must start with --) on
the animated element, where they cascade to everything inside it. That is the lever for the
things inline styles cannot reach directly: a value used several times in one declaration, a
gradient stop, a pseudo-element. One animated variable below drives a glow, a border and an
inner ring at once, and none of those three is addressed by name.
Accessibility & safety knobs
These are configured once at registration in Program.cs:
- Reduced motion -
AddBitBmotionServices(o => o.ReducedMotion = BmReducedMotionMode.User)respects the OSprefers-reduced-motioneverywhere. When reduced, transforms snap while opacity/color still animate. - CSS-injection safe mode -
o.CssSafeMode = BmCssSafeMode.Throwvalidates string values before they reach inline style (reject;,},javascript:, …). Enable it when binding untrusted input. - Capabilities - inject
BmotionCapabilitiesto branch onSupportsFrameLoop(false on Blazor Server, where per-frame features degrade).