Using Transition Property

The easiest way to add visually smooth change of states to web UI components is to use CSS transitions.

CSS transition property enable you to define the transition between two states of an element over a specified amount of time.

The property is specified as one or more single-property transitions, separated by commas ( , ). In its full notation for one single-property transition it looks like this:

transition: <property name> <duration> <easing function> <delay>;

If you do not specify the <property name> value, the transition will apply to all element properties that can be affected by it.

The property itself is a shorthand for the set of separate CSS properties, which may be used in any combination:

transition-delay

Specifies how long to wait before starting a property's transition effect when its value changes. 

A negative value will begin the transition effect immediately, but partway through the effect as if it has been already animated to this point of time.

transition-duration

Specifies the length of time a transition animation should take to complete.

transition-property

Specifies the CSS properties to which a transition effect should be applied.

transition-timing-function

Lets you define an easing function to establish an acceleration curve so that the speed of the transition can vary over its duration.

Time values are set in seconds ( s ) or milliseconds ( ms ).

Applying CSS Transitions to a Component

Let’s suppose that you want to scale up, say, a Timer component hovered over with a cursor, changing some of its styles and adding extra information along the way.

  1. In the UI Builder, add the component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to the Element Style tab.

  1. In the Element Style tab, add some base styles plus the rule for the hover state using the :hover pseudo-class to the Element CSS Style property:

text-align: center;
width: fit-content;
margin: auto;
padding: 24px 16px;
border-radius: 8px;
transform-origin: center center;

:hover {
  transform: scale(3);
  color: firebrick;
  font-weight: 800;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16);
}

  1. In the same property, add a pair of yet hidden pseudo-elements to show them only on the scaled up component. Also, add a couple more general component styles to support their positioning:

position: relative;
display: flex;
justify-content: center;

::before, ::after {
  position: absolute;
  opacity: 0;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

::before {
  content: "it's the final";
  top: 12px;
}

::after {
  content: "countdown";
  bottom: 12px;
}

:hover::before, :hover::after {
  color: black;
  opacity: 1;
}

  1. Now, check the resulting interaction on the dashboard.

  1. The interaction works as intended, but it happens instantaneously and feels like just another component appearing over the original one. To fix this, use transition properties in the written styles. The resulting CSS should be as follows:

position: relative;
display: flex;
justify-content: center;
text-align: center;
width: fit-content;
margin: auto;
padding: 24px 16px;
border-radius: 8px;
transform-origin: center center;
transition: 0.24s;  /* set up the transition time for the component */

:hover {
  transform: scale(3.0);
  color: firebrick;
  font-weight: 800;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16);
}

::before, ::after {
  position: absolute;
  opacity: 0;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  transition: 0.24s;  /* set up the transition time for the pseudo-elements */
}

::before {
  content: "it's the final";
  top: 24px; /* place the element off the final position to make it slide in when the animation happens */
}

::after {
  content: "countdown";
  bottom: 24px;  /* place the element off the final position to make it slide in when the animation happens */
}

:hover::before, :hover::after {
  color: black;
  opacity: 1;
  transition-timing-function: ease-in;  /* make the animation accelerate towards the end */
}

:hover::before { 
    transition-delay: 0.64s;  /* make the first line appear later */
    top: 12px;  /* move the element to its final position */
}

:hover::after { 
    transition-delay: 1.2s; /* make the second line appear even later */
    bottom: 12px;  /* move the element to its final position */
}

  1. Check the changes on the dashboard and appreciate the difference between the final result and the initial implementation.

Was this page helpful?