CSS Animations & Transitions

# CSS Animations & Transitions

## Transitions
```css
.btn {
  background: black;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
  background: #333;
  transform: scale(1.05);
}
/* Shorthand: property duration timing-function delay */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
```

## Keyframe animations
```css
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}
.card {
  animation: float 3s ease-in-out infinite;
  /* name duration timing iteration direction fill-mode */
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader { animation: spin 1s linear infinite; }
```

## CSS 3D transforms
```css
.scene {
  perspective: 800px;        /* depth of field */
  perspective-origin: 50% 50%;
}
.card {
  transform-style: preserve-3d; /* children in 3D space */
  transition: transform 0.6s;
}
.card:hover { transform: rotateY(180deg); }

.card-back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

/* 3D transforms */
transform: rotateX(45deg) rotateY(30deg) translateZ(50px);
```

## Custom easing with cubic-bezier
```css
/* ease-in-out-back */
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
```
Visualizer: cubic-bezier.com

## Animation events (JS)
```js
el.addEventListener('animationend', handler)
el.addEventListener('transitionend', handler)
```

## will-change
```css
/* Hint browser to promote to GPU layer BEFORE animation */
.animated { will-change: transform, opacity; }
/* Remove after animation to free GPU memory */
```

## Performance rules
- Only animate `transform` and `opacity` (GPU composited, no layout/paint).
- Avoid: `width`, `height`, `top`, `left`, `margin`, `padding` animations.
- Use `translateZ(0)` or `will-change: transform` to force GPU layer.
- `@media (prefers-reduced-motion: reduce)` -- disable animations for accessibility.

## @starting-style (modern)
```css
/* Animate from display:none */
.dialog {
  transition: opacity 0.3s;
  @starting-style { opacity: 0; }
}
```

## View Transitions API
```js
document.startViewTransition(() => {
  // DOM update
  container.innerHTML = newContent
})
```
```css
::view-transition-old(root) { animation: fade-out 0.3s; }
::view-transition-new(root) { animation: fade-in 0.3s; }
```