# Transitions & Transform — CSS

Source: https://www.geekswithgeeks.com/en/css/css-transitions-transform

> Smoothly animate property changes, and move/scale/rotate boxes.

## transition property

`transition: property duration timing-function` smooths a change between two states — e.g. from normal to `:hover`. Without it, changes jump instantly.

## A smooth hover

Background color fades over 200ms instead of snapping.

```css
button {
  background-color: #264de4;
  transition: background-color 200ms ease-in-out;
}

button:hover {
  background-color: #1a3aad;
}
```

## transform functions

`translate(x, y)` moves, `scale(n)` resizes, `rotate(deg)` spins — all without affecting layout or triggering reflow, which makes them fast.

## Combining transform + transition

A card that lifts and grows slightly on hover.

```css
.card {
  transition: transform 150ms ease-out;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
}
```