Transitions
Enhance UI interactions with Luxa CSS's custom transition timing functions for fluid, sharp, elastic, and impactful animations.
Luxa 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.
| Name | Beziers | Ideal scenario |
|---|---|---|
--fluid | 0.36, 0.66, 0.6, 1 | For smooth and natural transitions that mimic the fluidity of real-world motions. |
--sharp | 0.6, 0.12, 0.34, 0.96 | For precise and quick transitions, it is ideal for subtle yet swift animations. |
--elastic | 0.42, 0, 0.58, 1.8 | Perfect for bouncy animations that add a playful touch to your elements. |
--impact | 0.24, 0.9, 0.32, 1.4 | Designed for animations that need a dramatic effect with an impactful finish. |
If the provided options don’t meet your needs, you can create your own custom easing curves. Start designing your own bézier curves with this excellent tool from Lea Verou.