start learning
Image 1

CSS Transitions

CSS Transitions is powerful features that allow you to add dynamic and engaging effects to your web pages. Both CSS Transitions and Animations offer a way to enhance user interactions and bring visual appeal to your website or application.

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.


CSS Transition Example


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

/* 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:


.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 :


.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.


Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor