Discuss

Adding Transitions to page elements

On this page

About Transitions

Transitions are used to create a smooth animation between different states of an element. You can customize the duration, delay and the easing for your transitions. In this tutorial we will show you how to smoothly change the background color of an element on hover.

Page Overview

We added a Card with Image Overlay on our page:

Screenshot_1|690x413

We'd like to change the background color of the overlay to semi transparent when the card is hovered. Select the Image Overlay element:

Screenshot_2|690x413

Applying Transitions

Open the Design Panel.

Create a new class

The first thing we need to do here is to create a new class, so we can reuse this style for other cards as well. We enter bg-animated as a class name and select Create a new class option:

Screenshot_4|690x413

Transition Options

Scroll down until you reach the Transitions properties:

Screenshot_5|690x413

You can apply the transition to different CSS properties, such as width, height, color, background-color etc. We enter all so it applies to all the properties of the selected element:

Screenshot_6|690x413

We leave the delay to 0, as we don't need any delay in the animation here:

Screenshot_7|690x413

We set the duration to 0.25 - this means the animation will last 0.25 seconds:

Screenshot_8|690x413

You can right click to see the available predefined easings:

Screenshot_9|690x413

Customize the easing

You can also click the easing icon to bring up the easing editor:

Screenshot_10|690x413

You can fine-tune the easing here, using the two handles:

Screenshot_11|690x413

Click OK, when you are done:

Screenshot_12|690x413

Style the hover state

We are done setting up the transition settings. We want to run the transition on hover while changing the background color of the element, so click the hovered state at the top of Design Panel:

Screenshot_17|690x413

Scroll to Background and pick a background color:

Screenshot_18|690x413

We select black color, and set the opacity to 0.85 using the opacity control:

Screenshot_19|690x413

Save your page, and you are done:

Screenshot_20|690x413

You can see the background color changes smoothly on hover:

transitions|690x409