Transitions

Smooth animation between states with transitions

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

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.

In this lesson:

  1. Style the hover state of a button
  2. Set a transition to smooth out the animation on hover

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 and choose Box shadow from the Property dropdown
  2. Add a 500ms duration
  3. Keep the easing as is
  4. Now, hover over the button, you can see the intensity and distance of the shadow transition smoothly
 

Learn more about transitions and other effects.

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback