Animationer kan skapa komplexa och dynamiska effekter för att förbättra användarens interaktiva upplevelse. Animationer kräver ingen specifik utlösande händelse och kan ställas in att upprepas oändligt. Dessutom kan animationer ha flera mellanliggande tillstånd mellan initialt och slutligt tillstånd, vilket ger större flexibilitet och kontroll över de visuella effekterna.

Skapa animation

Vi kan skapa animationer med hjälp av @keyframes-regeln, som definierar en uppsättning CSS-stilar vid olika punkter i en animation. Vi anger även ett namn för animationen. Det ska vara beskrivande, det vill säga ange vilken typ av animation det är.

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

För att bestämma förändringen av egenskaper vid en specifik tidpunkt kan vi använda nyckelorden: from (0%) och to (100%). Oftast används procentvärden.

@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 har deklarerats kan vi använda keyframes-namnet som värde för egenskapen animation-name på olika element. En annan fördel med animationer är att de kan tillämpas upprepade gånger på flera element.

selector {
  animation-name: AnimationName;
}

Praktik

Lägg till en animation till div-elementet. Uppgiften är att ändra egenskapen background-color över tid. Det initiala tillståndet ska vara green, vid 60% ska det vara red, och i det slutliga tillståndet ska det vara blue. Dessutom ska vi ange egenskapen animation-duration för att tydligt se animationen i arbete.