Transitions

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Make UI interactions feel smoother

Transitions smoothly animate a property from one value to another. They're commonly used for hover animations, button feedback, and card lift effects. Animation isn't just for looks — it's also a way of giving users feedback on their actions. That said, overdo it and your website turns into a disco floor, so watch out.

css

.button {
  background-color: #77f5ff;
  transform: translateY(0);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.button:hover {
  background-color: #ff4dcd;
  transform: translateY(-2px);
}

You should see

When you hover over the button, you'll smoothly see it change color and lift up slightly.

Warning

Not every property performs the same when transitioned. transform and opacity are better suited for animation.