How do I create smooth transitions in CSS?

How do I create smooth transitions in CSS?

You can create smooth transitions in CSS using the transition property. For example, you can specify which properties to transition, the duration, and the timing function.

Can you give me an example of a CSS transition?

Sure! Here's a simple example:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s ease;
}

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

This will change the background color from blue to red smoothly when you hover over the box.

What other properties can I transition?

You can transition various properties like opacity, transform, height, width, and more. Just remember to specify them in the transition property.

Is there a way to delay the transition?

Yes, you can use the transition-delay property to delay the start of the transition. For example, transition: background-color 0.5s ease 0.2s; will wait 0.2 seconds before starting the transition.