Smooth animation between states with transitions

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Smooth animation between states with transitions

Transitions help create a smooth animation between different states of an element. A duration and easing type can be customized to create a unique transition. A common use case is to create a smooth transition for hover states on elements so that they don’t abruptly change on hover.

Learn more about transitions and other effects.

Style the hover state of a button

  1. Select a button
  2. Add a box shadow and style it so everything looks just how you want it to look
  3. Go to the hover state
  4. Increase the intensity of the shadow, and the distance
  5. Switch back to the none state

Set a transition to smooth out the animation on hover

  1. Add a transition. Choose Box Shadow from the Property dropdown.
  2. Add a 500ms duration
  3. Keep the easing as is

Now, hover over the button, you can see the intensity and distance of the shadow transition smoothly.

 

Browser support

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form