Enhance UI interactions with Luxa CSS's custom transition timing functions for fluid, sharp, elastic, and impactful animations.

Luxa CSS provides pre-defined cubic-bezier timing functions to create distinct animation effects, making your UI more responsive and dynamic.

Each timing function conveys a unique energy and motion style suitable for different UI interactions.

NameBeziersIdeal scenario
--fluid0.36, 0.66, 0.6, 1For smooth and natural transitions that mimic the fluidity of real-world motions.
--sharp0.6, 0.12, 0.34, 0.96For precise and quick transitions, it is ideal for subtle yet swift animations.
--elastic0.42, 0, 0.58, 1.8Perfect for bouncy animations that add a playful touch to your elements.
--impact0.24, 0.9, 0.32, 1.4Designed for animations that need a dramatic effect with an impactful finish.