Transitions

Smooth animation between states with transitions

layout-design
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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
Step one on the left, click on the plus icon in the Transitions effect row. Step two on the right, select the Box Shadow property from the background section in the property dropdown menu.
Step three, change Duration to 500 MS.
A blue button with text "Contact us!" is displayed twice. On the left, the button is in its normal state. On the right, the button is in its hover state with a box shadow behind it.h

Learn more about transitions and other effects.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?