···11---
22title: Animations
33description: A shared set of animations for the UI.
44----44+---
55+66+import { AnimationDurations, AnimationTimingFunctions, AllAnimations } from "../../examples/foundations/animations";
77+88+Animations provide smooth transitions and visual feedback throughout the UI.
99+Our animation system includes predefined keyframe animations, duration tokens, and timing function tokens that ensure consistent motion across your application.
1010+1111+## Usage
1212+1313+To use animations, import them from the animations theme file:
1414+1515+```tsx
1616+import { animations, animationDuration, animationTimingFunction } from "@/components/theme/animations.stylex";
1717+1818+const styles = stylex.create({
1919+ animated: {
2020+ animationName: animations.fadeIn,
2121+ animationDuration: animationDuration.default,
2222+ animationTimingFunction: animationTimingFunction.easeInOut,
2323+ },
2424+});
2525+```
2626+2727+## Animation Duration
2828+2929+Animation duration tokens control how long an animation takes to complete.
3030+Use these tokens to maintain consistent timing across your application.
3131+3232+- **fast**: 100ms - For quick, subtle animations
3333+- **default**: 150ms - The standard duration for most animations
3434+- **slow**: 200ms - For more noticeable transitions
3535+- **verySlow**: 300ms - For prominent, attention-grabbing animations
3636+- **extremelySlow**: 500ms - For very slow animations
3737+3838+<AnimationDurations />
3939+4040+## Animation Timing Functions
4141+4242+Timing functions control the acceleration and deceleration of animations, creating different motion feels.
4343+4444+- **linear**: Constant speed throughout the animation
4545+- **easeIn**: Starts slow and accelerates (cubic-bezier curve)
4646+- **easeOut**: Starts fast and decelerates (cubic-bezier curve)
4747+- **easeInOut**: Slow start, fast middle, slow end (cubic-bezier curve)
4848+- **easeElasticOut**: Elastic out (cubic-bezier curve)
4949+- **easeElasticIn**: Elastic in (cubic-bezier curve)
5050+- **easeElasticInOut**: Elastic in and out (cubic-bezier curve)
5151+- **easeSpring**: Spring-like easing (linear curve)
5252+5353+<AnimationTimingFunctions />
5454+5555+## Animations
5656+5757+The following keyframe animations are available for use in your components.
5858+Click on any animation box to see it in action.
5959+6060+- **fadeIn/fadeOut**: Fades an element in from transparent to opaque
6161+- **zoomIn/zoomOut**: Scales an element from 80% to 100% size
6262+- **slideInRight/slideOutRight**: Slides in from the right
6363+- **slideInLeft/slideOutLeft**: Slides in from the left
6464+- **slideInTop/slideOutTop**: Slides in from the top
6565+- **slideInBottom/slideOutBottom**: Slides in from the bottom
6666+6767+<AllAnimations />
6868+