CSS Transition: The Basics Explained

01

of 05

What does CSS Transition mean?

An element’s properties can be gradually changed over time by using the CSS transition property. As a result, designers can define a start point and an endpoint for a specific CSS property, and the browser will smoothly switch between the two values.

As an illustration, you might use CSS transition to animate an element’s progress across the screen or to gradually fade in a picture as a user hovers over it. Color, opacity, position, and other CSS properties are only a few of the many CSS attributes that can be affected by transitions.

02

of 05

How Does CSS Transition Work?

The duration and timing functions for the transition are specified along with the CSS properties that you want to transition. Observe the CSS transition syntax here:

transition: property duration timing-function;

For instance, you might use the following CSS code to apply a smooth transition to an element’s opacity over the course of one second:

.element {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.element:hover {
  opacity: 1;
}

In this code, the element’s opacity property is changing from 0 to 1 over the course of one second. The transition will begin slowly, pick up pace in the middle, and then slow down once more at the conclusion since the timing function we’re employing is called “ease-in-out.”

03

of 05

Examples of CSS Transition in Action

Let’s look at some real-world examples of how to use CSS transition in web design now that we have a better understanding of how it operates.

Fade in on hover

When a user hovers over an element, you can use a CSS transition to gradually bring it into view. Here’s an illustration:

.element {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.element:hover {
  opacity: 1;
}

Code in Action: mouse over the below box to see the text

Smooth movement

You may use CSS transition to make effects like sliding or bouncing that move smoothly. Here’s an illustration:

.element {
  transition: transform 0.5s ease-in-out;
}

.element:hover {
  transform: translateX(50px);
}

Smooth movement: mouse over the below box to see the text

Change in color

You can use CSS transition to switch colors subtly, for instance when a user hovers over a button. Here’s an illustration:

.button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

.button:hover {
  background-color: red;
}

Change in color: mouse over the below box to see the text

04

of 05

FAQs

05

of 05

Conclusion

A CSS transition is a potent technique that can enhance your website’s visual appeal. By slowly changing the properties of elements over time, you can create smooth movement, fade-in effects, and color transitions that keep people interested and make your website stand out. As a result of the information in this post, you are now equipped to experiment with CSS transitions and produce stunning site designs.