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 code example for that?

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 width, height, opacity, transform, and more. Just apply the transition property to the element.

Are there any performance considerations I should be aware of?

Yes, it's best to transition properties that are GPU-accelerated, like transform and opacity, to ensure smooth performance.