Hvordan fungerer CSS keyframe-animasjoner?

Question

Accepted Answer

Mens overganger animerer *mellom to tilstander*, definerer **`@keyframes`-animasjoner** en multi-trinns sekvens som kan kjøres automatisk, løpe og bevege seg gjennom mange mellomliggende tilstander.

## Definere og bruke en animasjon

```css
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; } /* 0% */
  to   { transform: translateX(0);     opacity: 1; } /* 100% */
}

.panel {
  animation: slide-in 0.5s ease-out;
}
```

## Multi-trinns keyframes med prosenter

```css
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); } /* peak of the bounce */
  100% { transform: translateY(0); }
}
```

Prosenter lar deg koreografi flere stadier i én animasjon — umulig med en enkel overgang.

## Den fullstendige animasjonssnarvei

```css
.spinner {
  animation: spin 1s linear infinite;
  /*         │    │    │      └── iteration-count (infinite = loop forever) */
  /*         │    │    └───────── timing function */
  /*         │    └────────────── duration */
  /*         └─────────────────── @keyframes name */
}
@keyframes spin { to { transform: rotate(360deg); } } /* classic loading spinner */
```

Andre egenskaper: `animation-delay`, `animation-direction: alternate` (ping-pong), `animation-fill-mode: forwards` (behold sluttilstanden), `animation-play-state: paused`.

## Ytelse — animer kun transform/opacity

```css
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animating width/height/top forces layout every frame → jank */
@keyframes bad  { to { width: 300px; top: 50px; } }
```

Keyframe-animasjoner kjører på hver ramme, så animering av layout-utløsende egenskaper er langt dyrere enn animering av `transform`/`opacity`.

## Tilgjengelighet

```css
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; } /* honor users sensitive to motion */
}
```

## Hvorfor det er viktig

Keyframe-animasjoner styrer lastere, oppmerksomhetssignaler, opptak og looping-effekter som overganger ikke kan uttrykke (multi-trinns, auto-kjørende, uendelig).

Ved å kjenne snarvei, holde deg til `transform`/`opacity` for glatthet og respektere `prefers-reduced-motion`, kan du bygge rik bevegelse som forblir presis og tilgjengelig.