Enkel fade IN / fade out ved hovring med css3

I gamle dager (jQuery-æraen) brukte vi .animate() eller .fadeIn() for hovringseffekter. I 2026 er bruk av JavaScript for dette en forbrytelse mot ytelse.

CSS3 transition er maskinvareakselerert (håndteres av GPU), jevnere, og krever null skript.

Hvorfor CSS transitions slår javascript

Ytelsesfordeler:

• GPU-akselerasjon: CSS-overganger kjører på grafikkortet, ikke CPU
• Ingen JavaScript-kjøring: Null skript-overhead, umiddelbar respons
• Nettleseroptimalisering: Nettlesere optimaliserer CSS-animasjoner naturlig
• Batterivennlig: Mindre CPU-bruk betyr lengre batterilevetid på mobil

Grunnleggende fade-effekt

La oss si at du har et bilde som skal dempes når du holder musepekeren over det.

/* Elementet */
.hover-image {
    opacity: 1;
    /* Den magiske delen */
    transition: opacity 0.3s ease-in-out;
}

/* Utløseren */
.hover-image:hover {
    opacity: 0.7;
}

Hva skjer:

1. Bildet starter på opacity: 1 (helt synlig)
2. Ved hovring, overgang til opacity: 0.7 (30% gjennomsiktig)
3. Tar 0,3 sekunder med jevn easing
4. Returnerer til opacity: 1 når hovring slutter

Forstå transition-egenskaper

Transition-property

Angir hvilken CSS-egenskap som skal animeres. Angi alltid spesifikke egenskaper i stedet for all for bedre ytelse.

/* Bra: Spesifikk egenskap */
transition: opacity 0.3s ease-in-out;

/* Bedre: Flere spesifikke egenskaper */

/* Unngå: Animerer ALLE egenskaper (ytelsesstraff) */

Transition-duration

Hvor lenge animasjonen varer. Vanlige verdier:

/* Veldig rask (subtil) */

/* Standard (perfekt for UI) */

Transition-timing-function

Kontrollerer akselerasjonskurven. Dette gjør at animasjoner føles “naturlige”.

/* Lineær: Konstant hastighet (robotisk) */

/* Ease: Sakte start, rask midt, sakte slutt (standard) */

/* Ease-in-out: Sakte start og slutt, rask midt (veldig jevn) */

Fullstendig kortform

Eksempler:

/* Enkel egenskap */

/* Med forsinkelse */

Avanserte hovringseffekter

1. Fade + skalering (zoom-effekt)

Kombiner opacity og transform for en moderne zoom-effekt:

.card-img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-img:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

2. Fade + overleggstekst

Perfekt for bildegallerier:

.image-container img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.image-container:hover img {
    opacity: 0.7;
}

Oppsummering

CSS-overganger er den moderne, effektive måten å lage hovringseffekter på.

Hovedpoenger:

• Bruk spesifikke egenskaper, ikke all
• 0,2-0,3s er det ideelle for UI-interaksjoner
• ease-out føles mest naturlig
• Bruk transform i stedet for posisjon/størrelse-egenskaper
• Test på ekte enheter