Animationer kan skabe komplekse og dynamiske effekter for at forbedre brugerens interaktive oplevelse. Animationer kræver ikke en specifik udløserhændelse og kan indstilles til at gentage uendeligt. Derudover kan animationer have flere mellemliggende tilstande mellem start- og sluttilstandene, hvilket giver større fleksibilitet og kontrol over de visuelle effekter.

Opret animation

Animationer kan oprettes ved hjælp af @keyframes-reglen, som definerer et sæt CSS-stilarter på forskellige tidspunkter i en animation. Derudover angives et navn til animationen. Navnet skal være beskrivende, dvs. angive hvilken type animation det er.

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

For at bestemme ændringen af egenskaber på et bestemt tidspunkt kan vi bruge nøgleordene: from (0%) og to (100%). Oftest anvendes procentværdier.

@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 animationen er erklæret, kan vi bruge keyframes-navnet som værdi for animation-name-egenskaben på forskellige elementer. En anden fordel ved animationer er, at de kan anvendes gentagne gange på flere elementer.

selector {
  animation-name: AnimationName;
}

Øvelse

Lad os tilføje en animation til div-elementet. Opgaven er at ændre background-color-egenskaben over tid. Den indledende tilstand skal være green, ved 60% skal den være red, og i den endelige tilstand skal den være blue. Derudover angiver vi egenskaben animation-duration for at kunne observere animationen i funktion.