Interface Literal

Transition Settings object literal

See Transitions for more information.

interface Literal {
    delay?: number;
    duration?: number;
    timingFunction?: TimingFunction;
}

Properties

delay?: number

Delay in seconds before transition starts

0

duration?: number

Duration in seconds of the transition from start to end

0

timingFunction?: TimingFunction

Timing function to use for animation

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.

"ease"