CSS Transitions

CSS Transitions enable smooth and gradual changes in CSS properties over a specified duration. They provide a smooth transition between different states, such as when hovering over an element or when a class is added or removed.

• Step 1: Create an HTML element to apply the transition effect to. For example, let's use a <div> element with a background color .
• Step 2: Define the initial CSS properties for the element, including the property you want to transition. In this case, we'll start with a blue background color .

Edit Copy Hide

<div class="box"></div>

Edit Copy Hide

/* Define styles for the box */
.box {
  width: 200px; /* Set the width to 200px */
  height: 200px; /* Set the height to 200px */
  background-color: blue; /* Set the background color to blue */
}

/* Add a transition effect for background-color */
.box {
  transition: background-color 1s; /* Apply a 1-second transition to background-color */
}

/* Change the background color to red on hover */
.box:hover {
  background-color: red; /* Set the background color to red on hover */
}

Step 3 : Specify the transition property and duration for the element. We want to transition the background color property over 1 second:

Edit Copy Hide

.box {
  transition: background-color 1s;
}

Step 4 : Define a CSS rule to change the property value that triggers the transition. Let's change the background color to red when hovering over the element :

Edit Copy Hide

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

With these steps, the <div> element will smoothly transition from a blue background color to a red background color when you hover over it.