CSS gradient hover-effekt: fire måder at animere den på

En CSS gradient hover-effekt kræver en omvej, for browsere laver ikke overgange på background-image: ændrer du gradienten i :hover, springer den. Fire teknikker giver et jævnt resultat. Lad en overdimensioneret gradient glide med background-position, animer registrerede farvestop med @property, krydsfade en ekstra gradient på et pseudo-element, eller flyt en radial glød med markøren. Hver passer til forskellige elementer, og alle er herunder med kode.

Hvorfor transition ikke virker på gradienter

For browseren er en gradient et billede. Den ved, hvordan man interpolerer et tal eller en farve, men ikke ét billede til et andet, så background-image interpoleres ikke, og den nye gradient erstatter den gamle med det samme. Brugerdefinerede egenskaber inde i gradienten opfører sig på samme måde, medmindre du registrerer dem, for en uregistreret egenskab er bare tekst.

/* 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);
}

Teknik 1: lad en overdimensioneret gradient glide

Gør baggrunden større end elementet, mal begge tilstande ind i den, og flyt den så. background-position kan have en overgang, så de nye farver glider ind. Det virker i alle browsere og kræver ingen registrering.

.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%;
}

Bevægelsen læses som et strøg, som passer til knapper og links. Den er mindre overbevisende på store kort, hvor man kan se gradienten rejse. Animation af background-position gentegner, hvilket er fint for små elementer; til en stor flade bruger du teknik 3. Gradientknapper i CSS har flere knapmønstre bygget på dette.

Teknik 2: animer farvestop med @property

Registrer stopfarverne som typede brugerdefinerede egenskaber, så kan browseren interpolere dem. Gradienten skifter så farve på stedet, uden at glide. @property virker i alle nuværende store browsere; ældre springer simpelthen, hvilket er en acceptabel nødløsning til en hover. Registreringsreglerne er beskrevet i 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;
}

Samme trick animerer vinklen. Registrer --angle med syntax: "<angle>", brug den i linear-gradient(var(--angle), ...) og ændr den ved hover: en gradient, der drejer fra 135 til 225 grader, når markøren ankommer, er et diskret, poleret strejf på kort og gradientkanter.

Begge teknikker indtil nu virker også på gradienttekst. Tekst klippet med background-clip: text viser, hvad baggrunden gør, så et glid eller en stop-overgang på en overskrift får farven til at løbe gennem bogstaverne ved hover. Hold ændringen blid på overskrifter, folk skal kunne læse, og sørg for, at begge tilstande har kontrast mod siden.

Teknik 3: krydsfade to gradienter

Læg hover-gradienten på et pseudo-element over basen og tone dets opacitet ind. Ændringer i opacitet håndteres af compositoren uden at gentegne, så det er det jævneste valg til store kort, hero-paneler og alt i et langt gitter.

.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;
}

Teknik 4: en glød, der følger markøren

En radial gradient placeret med brugerdefinerede egenskaber kan følge markøren. Sæt --x og --y fra et lille script, så følger lyset hånden. Hold den blød og væk fra tekst: det skal føles som lys på en overflade, aldrig som en glorie omkring ord.

.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`);
   });
*/

Sådan vælger du teknik

Til gradienter, der bevæger sig af sig selv i stedet for ved hover, se animerede CSS-gradienter. For det større billede af, hvad der koster tegnetid, se CSS gradient-ydeevne.

Touchskærme og reduceret bevægelse

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

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

Hover-effekter giver liv til et website. På opslag på sociale medier er der ingen markør, så bevægelsen må ligge i selve designet. Gradiently-Marks kan bære deres egen blide bevægelse, og med Pro eksporteres et design som MP4, WebM eller GIF, hvor browseren understøtter optagelse, klar til en story eller et opslag.