Geanimeerde CSS-kleurverloopachtergronden, goed gedaan

Een geanimeerd CSS-kleurverloop is een kleurverloopachtergrond die in de tijd van kleur of positie verschuift. Er is een addertje: schrijf je twee verschillende kleurverlopen in een @keyframes-regel, dan mengen browsers ze niet, ze springen. Elke werkende techniek animeert daarom iets naast het kleurverloop: zijn positie, de aangepaste eigenschappen erin of de laag waarop het is getekend. Welke je kiest bepaalt hoe vloeiend het eruitziet en hoeveel werk de browser per beeld doet.

Voor de ontwerpkant, wanneer beweging een merk helpt en hoe je haar tempo bepaalt, zie geanimeerde kleurverloopachtergronden. Deze gids is de code.

Techniek 1: verplaats een te grote achtergrond

Maak het kleurverloop twee tot vier keer zo groot als het element met background-size en animeer dan background-position, zodat na verloop van tijd een ander deel zichtbaar is. Het werkt in elke browser en heeft geen JavaScript nodig. Gebruik alternate zodat de beweging soepel omkeert in plaats van terug te springen naar het begin.

.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6, #fb923c);
  background-size: 300% 300%;
  animation: pan 18s ease-in-out infinite alternate;
}

@keyframes pan {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

De kosten: background-position is niet iets wat browsers alleen op de videokaart kunnen verplaatsen, dus het element wordt elk beeld opnieuw getekend. Op een knop is dat niets. Op een hero over het hele scherm is het echt werk dat blijft draaien zolang de pagina open is.

Techniek 2: animeer kleurstops met @property

Aangepaste eigenschappen zijn normaal strings, en die kunnen niet worden geïnterpoleerd. Registreer je er een met @property, dan krijgt hij een type, zoals <color>, <angle> of <percentage>, en getypeerde eigenschappen animeren vloeiend. Gebruik ze in het kleurverloop en je kunt de kleuren, de hoek of de positie van een stop direct animeren. @property wordt door alle huidige grote browsers ondersteund; kijk op caniuse als je oudere ondersteunt.

@property --from {
  syntax: "<color>";
  inherits: false;
  initial-value: #7c3aed;
}
@property --to {
  syntax: "<color>";
  inherits: false;
  initial-value: #f472b6;
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 120deg;
}

.hero {
  background: linear-gradient(var(--angle), var(--from), var(--to));
  animation: shift 16s ease-in-out infinite alternate;
}

@keyframes shift {
  to {
    --from: #0891b2;
    --to: #fb923c;
    --angle: 200deg;
  }
}

Ook deze techniek tekent elk beeld opnieuw, net als de eerste. Het voordeel is controle: je kunt één gloed in een mesh gradient verplaatsen, een conische rand draaien of een merkkleurverloop richting een tweede palet laten verschuiven zonder een te grote achtergrond.

Techniek 3: transformeer een kleurverloopblaag

Zet het kleurverloop op een pseudo-element dat veel groter is dan het element en animeer zijn transform, bijvoorbeeld een trage rotatie of drift. Browsers kunnen een getransformeerde laag meestal op de videokaart verplaatsen zonder hem opnieuw te tekenen, dus dit is de goedkoopste manier om een groot kleurverloop te animeren. will-change: transform geeft aan dat de laag vooraf gepromoveerd moet worden.

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #0891b2, #1e1b4b);
  animation: turn 40s linear infinite;
  will-change: transform;
}

@keyframes turn {
  to { transform: rotate(1turn); }
}

Techniek 4: crossfade twee kleurverlopen

Stapel twee kleurverloopblagen en animeer de opacity van de bovenste. Opacity is ook een eigenschap die de compositor aankan, dus de overgang is vloeiend en goedkoop. Het past bij trage stemmingswisselingen, zoals een dagpalet dat overgaat in een nachtpalet, en de twee kleurverlopen mogen in structuur volledig verschillen.

.sky {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #7dd3fc, #fde68a);
}

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #0f172a, #7c3aed);
  animation: dusk 20s ease-in-out infinite alternate;
}

@keyframes dusk {
  from { opacity: 0; }
  to   { opacity: 1; }
}

Een techniek kiezen

Meet in plaats van te gokken. In Chrome DevTools toont het Rendering-paneel met paint flashing de vlakken die elk beeld opnieuw worden getekend, en een Performance-opname toont hoeveel van elk beeld naar tekenen gaat. CSS-kleurverloopprestaties loopt er stap voor stap doorheen.

Verminderde beweging en goede manieren

Sommige mensen worden duizelig of afgeleid van achtergrondbeweging, en besturingssystemen laten hen om minder vragen. Respecteer dat met een prefers-reduced-motion-query die de animatie stopt en een stil, af beeld overlaat. De gids over verminderde beweging legt uit wat als beweging telt die het weghalen waard is.

@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero::before,
  .sky::after {
    animation: none;
  }
}