Transitions

CSS Transitions

Transitions animate property changes smoothly:

.btn {
  background: blue;
  transition: background 0.3s ease;
}
.btn:hover {
  background: darkblue;
}

Transition shorthand: property duration timing-function delay

transition: background 0.3s ease;
transition: all 0.2s ease-in-out;
transition: color 0.2s, transform 0.3s;  /* multiple */

Timing functions:

• ease — slow → fast → slow (default)
• ease-in — starts slow
• ease-out — ends slow
• ease-in-out — starts and ends slow
• linear — constant speed
• cubic-bezier(0.4, 0, 0.2, 1) — custom

Transform for smooth animations:

.card:hover {
  transform: scale(1.05);       /* scale up 5% */
  transform: translateY(-4px);  /* lift up */
  transform: rotate(10deg);     /* rotate */
}

Your Task

Create a button and a box, each with a transition on hover. Use both transition and transform.