The Transitions Panel lets you control how an element’s styles transition from one state to another. By adjusting the duration and delay, you can define how much time the transition will take from beginning to end. By editing the easing curve, you can tweak the rate of change over time, and create some interesting animation effects.
This feature is most commonly used when an element has a hover state, or when it is part of an interaction.
Top open the Transitions Panel, click the icon in the right toolbar, or select it from the "Window" menu.
Transition Duration and Delay
Duration
This value determines how long the transition will take to occur from beginning to end, expressed in milliseconds. All transitions are set to 250ms by default.
Delay
This value determines how long of a delay occurs before the transition begins, expressed in milliseconds. By default, transitions do not have a delay (0ms.)
Delay can be particularly useful when creating interactions: if you want to create a "staggered" effect where a series of animations happen one after the other, you can give each element a slightly higher delay value.
Both these parameters can be adjusted using the sliders, or you can enter values directly into the text inputs.
Easing Options
The easing curve allows you to control the rate of a transition, from its beginning to its end. The shape of the curve can cause the transition to move faster and slower over its duration. Creating different curves can bring distinctive style and movement to your animations.
Customizing an easing curve means adjusting the rate (y-axis) over time (x-axis). You can do this by selecting a preset, or by manually manipulating the curve's shape using two handles that represent the ease-in (the beginning of the transition), and the ease-out (the end of the transition.)
Preset Easing Curves
At the bottom of the Transition Panel, you'll see a set of preset curves. Click one of these to apply it to the element. Trying out some of these presets is a good way to get started with manipulating transitions.
A linear curve is the default. This isn't really a curve at all; it's a straight line that represents a constant rate of change over the entire duration of the transition. This is the default setting.
Ease-in curves have a slower rate of change at the beginning of the transition, giving the effect of "easing into" the animation.
Ease-out curves have the opposite effect. The curve straightens out towards the end, causing the rate of the transition to slow down as it nears completion.
Ease in-out curves combine both effect, so that the transition starts slowly, speeds up, then slows down again. These curves have an "S" shape.
Manually Editing Easing Curves
The graph at the top of the Transition Panel provides a visual representation of the currently selected easing curve. It displays a repeating animation to give you a preview of how the curve will affect the rate of change.
After selecting a preset curve, you can edit it further by grabbing one of the easing handles on either side, and dragging it around the graph to alter its shape.