Transitions & Hover Effects

transition tells the browser to animate a property change smoothly instead of jumping to the new value instantly. On its own it does nothing visible — it needs something that actually changes a property to animate, which is exactly what :hover provides.

Example: a button that responds to hovering

button {
  background: #2f7dff;
  transform: translateY(0);
  transition: background 0.3s ease, transform 0.3s ease;
}
button:hover {
  background: #1f5fe0;
  transform: translateY(-3px);
}

:hover is a pseudo-class — a selector matching an element only while a specific condition is true (here, the mouse is over it). The moment the mouse enters, the button's background and vertical position both change; because transition is set on the base button rule (not just the hover rule), the browser smoothly animates both changes over 0.3 seconds instead of snapping instantly, and smoothly reverses the same animation on mouse-out.

This is one of the cheapest ways to make an interface feel polished and responsive — a plain instant color swap on hover works, but a short, smooth transition is what actually reads as "considered" rather than "functional."