Transitions #
Transitions bring interactions to life and reinforce the connection between a user’s action and its result.
Duration #
aFP Design System use different transition durations to balance clarity and responsiveness.
Frequent, lightweight states (such as hover or focus) transition quickly, while more deliberate states (like checked or open) use slightly longer durations to ensure changes feel noticeable without being disruptive.
| Custom Property | Default | Preview |
|---|---|---|
--afp-transition-slow |
300ms |
Hover me |
--afp-transition-normal |
150ms |
Hover me |
--afp-transition-fast |
75ms |
Hover me |
Easing #
Easing controls the standard transition-timing-function used for transitions
| Custom Property | Default | Preview |
|---|---|---|
--afp-transition-easing |
ease |
Hover me |