Gå til innhold

Animasjoner

Overganger (Transitions)

En transition animerer endringer i CSS-egenskaper over tid. I stedet for at en farge skifter umiddelbart, kan den gli jevnt over.

.knapp {
    background-color: blue;
    transition: background-color 0.3s;
}

.knapp:hover {
    background-color: darkblue;
}

Transition-egenskaper

/* egenskap | varighet | timing | forsinkelse */
transition: background-color 0.3s ease 0s;

/* Flere egenskaper */
transition: background-color 0.3s, transform 0.3s;

/* Alle egenskaper */
transition: all 0.3s;

Hvilken egenskap som skal animeres:

transition-property: background-color;
transition-property: transform;
transition-property: all;  /* Alle egenskaper */

Hvor lang tid animasjonen tar:

transition-duration: 0.3s;   /* 0.3 sekunder */
transition-duration: 500ms;  /* 500 millisekunder */

Forsinkelse før animasjonen starter:

transition-delay: 0.5s;

Hover-effekter

Transitions brukes ofte med :hover-pseudoklassen:

.knapp {
    background-color: #3b82f6;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.3s;
}

.knapp:hover {
    background-color: #1d4ed8;
}

.kort {
    transition: transform 0.3s;
}

.kort:hover {
    transform: scale(1.05);
}

.kort {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}

.kort:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Transform

transform lar deg endre et elements posisjon, størrelse og rotasjon uten å påvirke andre elementer.

/* Forstørre */
transform: scale(1.5);      /* 150% størrelse */

/* Rotere */
transform: rotate(45deg);   /* 45 grader */

/* Flytte */
transform: translateX(20px);  /* 20px til høyre */
transform: translateY(-10px); /* 10px opp */

/* Kombinere */
transform: scale(1.1) rotate(5deg);

Animasjoner (@keyframes)

Mens transitions animerer mellom to tilstander, lar @keyframes deg lage mer komplekse animasjoner med flere steg.

from / to

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

.element {
    animation: fadeIn 1s;
}

Prosentsteg

@keyframes blinke {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

animation-egenskapen

/* navn | varighet | timing | forsinkelse | repetisjoner | retning */
animation: fadeIn 1s ease 0s 1 normal;

/* Uendelig repetisjon */
animation: blinke 2s infinite;

/* Frem og tilbake */
animation: blinke 2s infinite alternate;

Transition vs. animation

  • Bruk transition for enkle endringer mellom to tilstander (f.eks. hover-effekter)
  • Bruk animation for mer komplekse bevegelser, repetisjoner, eller animasjoner som starter av seg selv

Praktiske eksempler

@keyframes puls {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.puls-knapp {
    padding: 10px 20px;
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    animation: puls 2s infinite;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.innhold {
    animation: fadeSlideIn 0.5s ease;
}

@keyframes spinn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spinn 1s linear infinite;
}

.kort {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.kort:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Timing-funksjoner

Timing-funksjoner styrer hastigheten gjennom animasjonen:

Funksjon Beskrivelse
ease Starter sakte, raskere i midten, bremser til slutt (standard)
linear Jevn hastighet hele veien
ease-in Starter sakte, blir raskere
ease-out Starter raskt, bremser til slutt
ease-in-out Starter og slutter sakte 
.boks1 { transition: transform 0.5s ease; }
.boks2 { transition: transform 0.5s linear; }
.boks3 { transition: transform 0.5s ease-in; }
.boks4 { transition: transform 0.5s ease-out; }

Referanse

Se CSS-referansen for en komplett oversikt over transitions og transforms.

Oppsummering

Egenskap Beskrivelse
transition Animerer endringer mellom to tilstander
transform Endre posisjon, størrelse og rotasjon
scale() Forstørre/forminske
rotate() Rotere
translateX/Y() Flytte horisontalt/vertikalt
@keyframes Definere en animasjon med flere steg
animation Koble en @keyframes-animasjon til et element
animation: navn 1s infinite Uendelig animasjon