Transitions
Enhance UI interactions with Luxa CSS's custom transition timing functions for fluid, sharp, elastic, and impactful animations.
On this page
Luxa CSS offers pre-defined cubic-bezier timing functions to create distinct animation effects, enhancing UI responsiveness and dynamism.
| 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.
Usage
Apply these timing functions to your CSS transitions or animations:
.element {
transition: all 0.3s var(--fluid);
}
Best Practices
- Choose timing functions that match the nature of your UI interaction;
- Use consistent transitions throughout your interface for a cohesive feel;
- Avoid overusing dramatic transitions, which can be distracting;
- Test your animations across different devices to ensure smooth performance.
By leveraging these transition timing functions, you can create more engaging and polished user interfaces that respond naturally to user interactions.
Getting Help
Need help? Open an issue. I'll be happy to help. 🎈