CSS Transitions

In CSS, transitions play a major role in creating smooth effects that are pleasing to the human eye. A CSS transition helps you to change the values of the properties smoothly (over a given duration). This will make your web pages active and more appealing to people.

 In this blog, you will learn everything about CSS transitions and how you can implement them to add attractive effects to your web applications. We will also discuss the CSS transition property and use it in different ways that can boost your projects. So let’s get started!

Table of Contents:

• What are CSS Transitions?
• Basic Concepts of CSS Transitions
  1. Property
  2. Duration
  3. Timing Function
  4. Delay
• Setting Up Your CSS Transition
  • Step 1: Choose Your Element
  • Step 2: Define the Initial State
  • Step 3: Use Transitions
  • Step 4: Specify the Change
• Experimenting with “Transform”
  • Scaling an Element
  • Adding Multiple Transitions
  • Creating a Sequence
• Best Practices for Using CSS Transitions
• Conclusion

What are CSS Transitions?

CSS Transitions are basically a way to make changes to the HTML elements in a smooth way by modifying the properties over time. When you hover over an element, the duration and timing for the transition are specified by the CSS transition property.

For example, a simple transition involves changing the color of a button when you hover over it. Instead of changing the color, the transitions help the color to change gradually. 

Basic Concepts of CSS Transitions 

Now, let us look at CSS transitions in a simpler way. In order to understand how CSS transitions work, you need to understand their four main parts. They are explained below:

1. Property

In a CSS transition, the property is the part of the element that you want to change. You can take it as a digital photo frame where you want to change its color from black to gold. Here, the property that you are changing is color. Therefore, the property just means what will change exactly, like color, size, or position.

For example, if you want to change the background color of an element, you should set the property in the following way:

transition-property: background-color;

The above code tells the browser that you want to change the background color when you hover.

Boost Your Resume With Real Skills

Join Our Web Dev Course

Explore Program

2. Duration

Duration in CSS transition is basically the time taken for the change to take place. Therefore, if your digital frame takes 2 seconds to change its color from black to gold, this means that the transition only lasts for 2 seconds. It is the same as asking someone to walk slowly from the door to the chair instead of running.

In order to make this happen in CSS, you should set the duration in the following way:

transition-duration: 2s;

The above code means that the color change happens slowly over 2 seconds instead of getting changed instantly.

3. Timing Function

The Timing Function in CSS transition is like setting the speed pattern of the change that has taken place. It helps you to control how fast or slow the transition occurs at different moments.

In order to create a smooth start and end to the transition, you can use the following line:

transition-timing-function: ease-in-out;

In the above code, the value ease-in-out means that the change will occur slowly, go a bit faster in the middle, then slow down again at the end. This helps to make the transition smooth and normal.

4. Delay

Sometimes, you might also want the transition to wait for a moment before it starts. That waiting period is called the delay. 

To add a short pause before the transition starts, you can use the following line:

transition-delay: 1s;

Inside a 1-second delay, when you click or hover on something, the change doesn’t happen right away; it takes 1 second before it starts.

Setting Up Your CSS Transition

CSS transitions are very easy to understand and use. You don’t have to install anything extra or use any extra tools. You just need to write a few lines of CSS. The steps to set up CSS transitions are given below:

Step 1: Choose Your Element

At first, you have to choose the part of the webpage where you want to add a transition. It may be a button, image, or text block. You should start with a simple example, which is: smoothly changing the background color of a button when you hover over it.

Step 2: Define the Initial State

Before you add any effects, you need to set how the button should look by default. This will make it look like the way the button will appear before you hover over it. Given below is a simple CSS code to make a blue button:

button {
background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

The entire HTML code with the above CSS code is given below:

Code:

Output:

Explanation:

The above HTML code is used to create a blue button that says “Click Me.” The CSS makes the button look clean, with padding, no borders, and white text.

Step 3: Use Transitions

Now, to change the color of the button, you need to hover over the button. To do that, you have to use the transition property. This tells the browser about the changes that you want to make, like the background color, the time it takes to change the color (0.5 seconds), and how the speed should flow (like starting and ending slowly using ease-in-out). To use transitions, add the line given below to your CSS:

transition: background-color 0.5s ease-in-out;

The entire HTML code is given below:

Code:

Output:

Explanation:

The above HTML code is used to create a blue button that turns green smoothly. The transition property makes the color change after 0.5 seconds.

Step 4: Specify the Change

Now, the color of the button changes from blue to green in half a second. Now, you have to tell it what colour it should change to. For this, you need to use the :hover effect. This helps you to set a new style for the button when you hover the mouse over it. Add the below CSS line to make it work:

button:hover { background-color: red; }

The entire HTML code is given below:

Code:

Output:

Explanation:

From the above output, you can see that when you hover the mouse over the button, it changes the color from blue to red in 0.5 seconds.

Experimenting with “Transform”

One of the interesting things you can animate using the CSS transition property is the transform property. It helps you to rotate, resize, move, or tilt an element. This provides you with a lot of creative ways to make your webpage more interesting and interactive.

Scaling an Element

Now, let’s try making an image slightly bigger when you hover over it. This is called scaling. It is an easy way to make things more attractive. Here’s how you can do it:

img {
  transition: transform 0.3s ease-in-out;
  transform: scale(1); 
}

img:hover {
  transform: scale(1.1); 
}

The entire HTML code is given below:

Code:

Output:

Explanation:

The above HTML code is used to display an image that grows smoothly by 10% when you hover the mouse over it. It uses the CSS transition property on transform. You can replace the URL of the image with any image you want.

Adding Multiple Transitions

You can also use CSS transitions to change multiple things at a time. For example, you can make an element grow in size and also change its color.

.element {
  background-color: blue;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transform: scale(1);
}

.element:hover {
  transform: scale(1.1);
  background-color: red;
}

The entire HTML code is given below:

Code:

Output:

Explanation:

The above code is used to create a webpage consisting of an image and a colored box. They both grow smoothly when you hover the mouse over them. Other than that, the box also changes its color.

Creating a Sequence

There may be times when you would like the effects to happen one by one rather than simultaneously. You can do this using a transition delay. For example, you can change the color of the element first, then move it a moment later.

.sequence-element {
  transition: background-color 0.3s, transform 0.3s 0.3s; 
  transform: translateX(0); 
}

.sequence-element:hover {
  background-color: red;
  transform: translateX(100px);
}

The entire HTML code is given below:

Code:

Output:

Explanation:

In the above example, you can see that when you hover over the blue box, it will first change its color to red. After that, it will slide by 100px to the right after a short pause. This is made possible with the help of the CSS transition property.

Now, by combining all the codes in this section, a sample code is given below to help you understand this concept better:

Code:

The CSS file for the above HTML code is given below:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.card-container {
    perspective: 1000px; 
}

.card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease;
    transform: rotateY(0deg) scale(1); 
    cursor: pointer;
}

.card:hover {
    transform: rotateY(20deg) scale(1.1); 
}

h2 {
    margin-top: 0;
}

p {
    color: #555;
}

Output:

Best Practices for Using CSS Transitions

1. The transitions should look smooth at all times without being distracting.

2. Try to use properties like transform and opacity because they work faster and smoother than things like width or height.

3. There is no sense in putting transition everywhere; it is better to apply it only in the places where it improves the user experience.

4. If you are adding a delay to your transition, make sure it does not look like the page is lagging.

5. Try all the timing functions like ease, ease-in, or ease-out to find out which works the best.

6. Always test your transitions on other devices so that you can ensure they work well in all places.

Conclusion

In short, a CSS transition can make your website more interactive and well-refined. While doing color changes, scaling of images, and the smoothness of movement, transitions are used to make the experience more enjoyable to the user. You only need to keep the transitions smooth, not overwhelming, and use them where they add real value. Applied properly, a CSS transition is as good as effortlessly transforming your design into something beautiful without much effort. To learn more about CSS, enroll in our Web Development Course.

CSS Transitions – FAQs