Animasjoner kan skape komplekse og dynamiske effekter for å forbedre brukerens interaktive opplevelse. Animasjoner krever ikke en spesifikk utløsende hendelse og kan settes til å gjentas uendelig. I tillegg kan animasjoner ha flere mellomliggende tilstander mellom start- og sluttpunktet, noe som gir større fleksibilitet og kontroll over de visuelle effektene som produseres.

Opprette animasjon

Vi kan opprette animasjoner ved å bruke @keyframes-regelen, som definerer et sett med CSS-stiler på ulike punkter i en animasjon. Vi angir også et navn for animasjonen. Dette navnet bør være beskrivende, altså si noe om hvilken type animasjon det er.

@keyframes AnimationName {
 /* Styles at various points (at least initial and final) */ 
}

For å bestemme endringen av egenskaper på et bestemt tidspunkt, kan vi bruke nøkkelordene: from (0%) og to (100%). Oftest brukes prosentverdier.

@keyframes AnimationName {
  0% {
    /* Properties to be changed */
  }

  10% {
    /* Properties to be changed */
  }

  30% {
    /* Properties to be changed */
  }

  /* As many as we need */
  
  100% {
    /* Properties to be changed */
  }
}

Når animasjonen er deklarert, kan vi bruke navnet på keyframes som verdi for animation-name-egenskapen på ulike elementer. En annen fordel med animasjoner er at de kan brukes gjentatte ganger på flere elementer.

selector {
  animation-name: AnimationName;
}

Øvelse

La oss legge til en animasjon på div-elementet. Oppgaven er å endre background-color-egenskapen over tid. Starttilstanden skal være green, ved 60% skal den være red, og i sluttfasen skal den være blue. I tillegg skal vi angi animation-duration-egenskapen for å kunne observere animasjonen i bruk.