Hover effects and transitions
A well-crafted hover transition tells users that an element is interactive and makes the UI feel alive. This article shows you how to use the Effects pane to add smooth, performant transitions between an element’s default and hover states.
Opening the Effects pane
Select any element on the canvas, then click the Effects tab in the right-hand control panel. The Effects pane is divided into sections: Transition, Box Shadow, Text Shadow, Transform, and Filter. This article focuses on Transition.
The Transition section
The Transition section has four fields:
| Field | What it controls |
|---|---|
| Property | Which CSS property animates (e.g., background-color, transform) |
| Duration | How long the animation takes (in seconds or milliseconds) |
| Timing function | The acceleration curve of the animation |
| Delay | How long to wait before the animation begins |
The pseudo-class workflow
Transitions don’t do anything on their own — they animate between two states. To set up a hover transition:
-
Set the default styles
Make sure your element looks correct in its default state (no hover). This is the “from” value.
-
Add a transition
In the Effects pane, set a transition. For example: Property
background-color, Duration0.2s, Timingease. -
Enter :hover mode
In the Style pane, click the pseudo-class selector dropdown and choose :hover. The canvas shows an indicator that you’re styling the hover state.
-
Change the style
Change the property you added a transition for — for example, change the background color. This is the “to” value.
-
Exit :hover mode
Click the pseudo-class selector and choose None. Preview in the browser to see the transition animate between the two states.
Common transition properties
background-color— color fills on buttons and cardscolor— text color changestransform— scale, translate, and rotate (see below)opacity— fade in/outborder-color— form field focus rings and card bordersbox-shadow— elevation changes on hover
Timing functions
The timing function controls how the animation accelerates over its duration.
| Value | Feel | Best for |
|---|---|---|
ease | Slow start, fast middle, slow end | Most UI interactions (default) |
ease-in | Slow start, fast end | Elements leaving the screen |
ease-out | Fast start, slow end | Elements entering the screen |
ease-in-out | Slow start and end | Expanding/collapsing panels |
linear | Constant speed | Looping animations, spinners |
cubic-bezier(…) | Custom curve | Fine-tuned brand motion |
Duration guidelines
- Micro-interactions (hover, focus, active): 150–300 ms. Shorter feels snappy; longer feels sluggish.
- Larger motion (panels, modals, slide-ins): 300–500 ms.
- Entrance animations: 400–600 ms.
If a transition feels too fast, add 50 ms. If it feels slow, remove 50 ms. Trust your eye.
Multiple transitions
To transition more than one property simultaneously, click Add transition in the Effects pane to add a second row. Each row is an independent transition declaration. For example, transitioning both background-color and transform gives you a combined color-and-scale hover effect.
