Question

How can you apply a transition effect in CSS?

How do I apply a transition effect in CSS? I want to create a smooth animation when elements change properties (like color, size, or position), but I'm not sure how to set it up in CSS or which properties to use. What's the basic syntax for creating a transition effect?

Answer 1

In CSS, you can apply a transition effect to smoothly animate changes between two states of an element. Transitions are typically used for properties like color, background-color, width, height, opacity, and transform, among others.

Let’s see the example:

Html

<div class="box">Hover over me</div>

Css

.box {

  width: 100px;

  height: 100px;

  background-color: #3498db;

  transition: width 0.5s ease, background-color 0.5s ease;

}

.box:hover {

  width: 150px;

  background-color: #2ecc71;

}

This example smoothly transitions the box’s width and background color when hovering over it, creating a smooth, engaging effect.