CSS-verloop hover-effect: vier manieren om het te animeren

Een CSS-verloop hover-effect heeft een omweg nodig, want browsers laten background-image niet overgaan: verander het verloop in :hover en het springt. Vier technieken geven een soepel resultaat. Schuif een te groot verloop met background-position, animeer geregistreerde kleurstops met @property, laat een tweede verloop op een pseudo-element crossfaden, of verplaats een radiale gloed met de cursor. Elke past bij andere elementen, en alle staan hieronder met code.

Waarom transition niet werkt op verlopen

Voor de browser is een verloop een afbeelding. Hij weet hoe hij een getal of een kleur interpoleert, maar niet de ene afbeelding in de andere, dus background-image wordt niet geïnterpoleerd en het nieuwe verloop vervangt het oude direct. Custom properties binnen het verloop gedragen zich hetzelfde, tenzij je ze registreert, omdat een niet-geregistreerde property gewoon tekst is.

/* This snaps, with no easing */
.btn {
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
  transition: background-image 400ms ease;
}
.btn:hover {
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
}

Techniek 1: een te groot verloop verschuiven

Maak de achtergrond groter dan het element, schilder beide staten erin en verschuif hem dan. background-position kan overgaan, dus de nieuwe kleuren glijden binnen. Het werkt in elke browser en vraagt geen registratie.

.btn {
  background-image: linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 500ms ease;
}

.btn:hover {
  background-position: 100% 50%;
}

De beweging leest als een veeg, wat past bij knoppen en links. Het is minder overtuigend op grote kaarten, waar je het verloop ziet reizen. background-position animeren tekent opnieuw, wat prima is voor kleine elementen; gebruik voor een groot oppervlak techniek 3. Verloopknoppen in CSS heeft meer knoppatronen hierop gebouwd.

Techniek 2: kleurstops animeren met @property

Registreer de stopkleuren als getypeerde custom properties en de browser kan ze interpoleren. Het verloop verandert dan ter plekke van kleur, zonder schuiven. @property werkt in alle huidige grote browsers; oudere springen gewoon, wat een acceptabele terugval is voor een hover. De registratieregels staan in CSS @property.

@property --stop-a {
  syntax: "<color>";
  inherits: false;
  initial-value: #1e1b4b;
}

@property --stop-b {
  syntax: "<color>";
  inherits: false;
  initial-value: #6d28d9;
}

.card {
  background-image: linear-gradient(135deg, var(--stop-a), var(--stop-b));
  transition: --stop-a 450ms ease, --stop-b 450ms ease;
}

.card:hover {
  --stop-a: #6d28d9;
  --stop-b: #f472b6;
}

Dezelfde truc animeert de hoek. Registreer --angle met syntax: "<angle>", gebruik hem in linear-gradient(var(--angle), ...) en verander hem bij hover: een verloop dat van 135 naar 225 graden draait als de aanwijzer arriveert is een subtiele, verzorgde toets voor kaarten en verloopranden.

Beide technieken tot nu toe werken ook op verlooptekst. Tekst die met background-clip: text is uitgesneden toont wat de achtergrond doet, dus een schuifbeweging of stopovergang op een kop laat de kleur bij hover door de letters lopen. Houd de verandering mild op koppen die mensen moeten lezen, en zorg dat beide staten contrast houden tegen de pagina.

Techniek 3: twee verlopen crossfaden

Zet het hover-verloop op een pseudo-element boven de basis en laat de dekking infaden. Veranderingen in dekking worden door de compositor afgehandeld zonder opnieuw tekenen, dus dit is de soepelste keuze voor grote kaarten, hero-panelen en alles in een lang raster.

.tile {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
  opacity: 0;
  transition: opacity 400ms ease;
}

.tile:hover::before {
  opacity: 1;
}

Techniek 4: een gloed die de cursor volgt

Een radiaal verloop dat met custom properties wordt gepositioneerd kan de aanwijzer volgen. Stel --x en --y in met een klein script en het licht beweegt met de hand mee. Houd het zacht en uit de buurt van tekst: het moet voelen als licht op een oppervlak, nooit als een halo rond woorden.

.panel {
  background-image:
    radial-gradient(circle 220px at var(--x, 50%) var(--y, 50%), rgb(244 114 182 / 0.35), transparent 70%),
    linear-gradient(135deg, #1e1b4b, #312e81);
}

/* JavaScript:
   panel.addEventListener("pointermove", (e) => {
     const r = panel.getBoundingClientRect();
     panel.style.setProperty("--x", `${e.clientX - r.left}px`);
     panel.style.setProperty("--y", `${e.clientY - r.top}px`);
   });
*/

Een techniek kiezen

Voor verlopen die uit zichzelf bewegen in plaats van bij hover, zie geanimeerde CSS-verlopen. Voor het bredere beeld van wat tekentijd kost, zie CSS-verloopprestaties.

Touchschermen en verminderde beweging

@media (hover: hover) {
  .btn:hover { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

Hover-effecten brengen een website tot leven. Op socialposts is er geen aanwijzer, dus beweging moet in het ontwerp zelf zitten. De Marks van Gradiently kunnen hun eigen rustige beweging dragen, en met Pro exporteert een ontwerp als MP4, WebM of GIF waar de browser opnemen ondersteunt, klaar voor een story of een post.