What are some examples of CSS transitions?

What are some examples of CSS transitions?

CSS transitions allow you to change property values smoothly over a given duration. For example, you can transition the background color of a button when hovered.

Can you show me a specific code example?

Sure! Here's a simple example:

.button {
  background-color: blue;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: green;
}

This will change the button's background color from blue to green over 0.5 seconds when hovered.

What other properties can I transition?

You can transition various properties like opacity, transform, height, width, and more. Just ensure the property is animatable!

Are there any performance considerations?

Yes, it's best to avoid transitioning properties that trigger layout changes, like width and height, as they can be less performant. Instead, use transform and opacity for smoother animations.