# Transitions & Transform — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

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

> Animate state changes with transitions and move, scale or rotate elements with transform.

## 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);
}
```