What are some advanced CSS transition examples?

What are some advanced CSS transition examples I can use in my project?

You can create smooth transitions for properties like color, background, and transform. For example, try transitioning a button's background color and scale on hover.

Can you show me a code snippet for that?

Sure! Here's a simple example:

.button {
  background-color: blue;
  color: white;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: green;
  transform: scale(1.1);
}

This will change the background color and scale the button when hovered.

What about using transitions with multiple elements?

You can use the :nth-child selector to target specific elements. For instance, you can create a list where each item transitions differently on hover.

That sounds great! Can you provide a list example?

Absolutely! Here's a quick example:

.list-item {
  transition: transform 0.3s ease;
}

.list-item:hover {
  transform: translateY(-10px);
}

This will make each list item move up when hovered.