Type Alias TimingFunction

TimingFunction:
    | "linear"
    | "ease"
    | "ease-in"
    | "ease-out"
    | "ease-in-out"
    | "step-start"
    | "step-end"
    | `cubic-bezier(${string})`

Timing function types

Remarks

Values

"ease"
- Transition starts at a constant speed and ends slowing down
"linear"
- Straight point-to-point animation
"ease-in"
- Transition starts slow and continues in a constant speed
"ease-out"
- Transition starts at a constant speed and ends slowing down
"ease-in-out"
- Transition starts slow, continues at a constant speed, and ends slowing down
"step-start"
- Transition steps to start position
"step-end"
- Transition steps to end position
"cubic-bezier(a,b,c,d)"
- Custom bezier curve (See: cubic-bezier.com)

See Timing Function Settings for more information.