Motion

Durations come from the Neutral motion scale. The bases are fast 125, medium 300, and slow 700. Neighbors use a 0.75 ratio, and the results are rounded to 5 milliseconds. There is one easing token, --astryx-ease-standard: cubic-bezier(0.24, 1, 0.4, 1).

Shared enter and exit keyframes live in @astryx-vue/core at styles/motion.css. They are available when you import @astryx-vue/core/styles.css, or any component sheet that pulls that file in. Existing components still use their own animation names, and these shared utility classes provide reusable motion primitives:

Class	Keyframes
astryx-motion-fade-in / fade-out	astryx-fade-in / astryx-fade-out
astryx-motion-scale-in / scale-out	astryx-scale-in / astryx-scale-out
astryx-motion-slide-in-above / out	from above
astryx-motion-slide-in-below / out	from below
astryx-motion-slide-in-start / out	from the start side
astryx-motion-slide-in-end / out	from the end side

Distance and scale read --astryx-motion-offset, --astryx-motion-scale-from, and the opacity variables. When the system asks for reduced motion, those distances and the scale collapse to zero, opacity jumps to the end state, and the shared classes use a duration of 0.01ms. Component duration tokens are left alone.

Replay the samples below. With reduced motion on, they sit at the end state.

Duration

Neutral is snappier than the default scale: fast 125ms, medium 300ms, slow 700ms, ratio 0.75, rounded to 5ms.

--astryx-duration-fast-min

95ms

--astryx-duration-fast

125ms

--astryx-duration-fast-max

165ms

--astryx-duration-medium-min

225ms

--astryx-duration-medium

300ms

--astryx-duration-medium-max

400ms

--astryx-duration-slow-min

525ms

--astryx-duration-slow

700ms

--astryx-duration-slow-max

935ms

Easing

Entrances use this decelerating curve.

--astryx-ease-standard

cubic-bezier(0.24, 1, 0.4, 1)

Motion

Enter and exit each have a fade, a scale, and slides from above, below, the start side, and the end side. When the system asks for reduced motion, the distance and scale collapse to zero and opacity jumps to the end state. Existing components still use their own animation names.

fadescaleabovebelowstartend

• astryx-fade-in
• astryx-fade-out
• astryx-scale-in
• astryx-scale-out
• astryx-slide-in-above
• astryx-slide-out-above
• astryx-slide-in-below
• astryx-slide-out-below
• astryx-slide-in-start
• astryx-slide-out-start
• astryx-slide-in-end
• astryx-slide-out-end