MakeW3web

Transition basics

In CSS, transitions allow you to smoothly change the style of an element over a specified duration. Here's a simple explanation of transition basics, including the transition property, duration, and timing function, along with some examples:

Transition Property

The transition property specifies the CSS properties that should be animated when a change occurs. You can specify one or more properties by separating them with commas. For example:

div {
  transition: background-color 1s;
}

This applies a transition to the `background-color` property of the `div` element with a duration of 1 second. When the background color of the element changes, the transition effect will be applied.

Duration

The duration specifies how long the transition should last, and is defined using the `transition-duration` property. You can specify a duration in seconds or milliseconds. For example:

div {
  transition: background-color 1s;
  transition-duration: 0.5s;
}

This applies a transition to the background-color property of the div element with a duration of 0.5 seconds.

Timing Function

The timing function controls the acceleration and deceleration of the transition effect. There are several predefined timing functions available in CSS, such as `linear`, `ease`, `ease-in`, `ease-out`, and `ease-in-out`. You can also use the cubic-bezier() function to create a custom timing function. The timing function is defined using the `transition-timing-function` property. For example:

div {
  transition: background-color 1s;
  transition-timing-function: ease-in-out;
}

This applies a transition to the `background-color` property of the `div` element with a duration of 1 second and an easing function of `ease-in-out`.

Putting it all Together

Here's an example that combines all three transition properties:

div {
  transition: background-color 1s ease-in-out;
}

This applies a transition to the `background-color` property of the `div` element with a duration of 1 second and an easing function of `ease-in-out`.

By using transitions in your CSS, you can add subtle animation effects to your web pages that enhance the user experience. With the transition property, duration, and timing function, you have a lot of flexibility in creating smooth and engaging style changes.

Was this page helpful?