Animaties kunnen complexe en dynamische effecten creëren om de interactieve gebruikerservaring te verbeteren. Animaties vereisen geen specifieke triggergebeurtenis en kunnen oneindig herhaald worden. Bovendien kunnen animaties meerdere tussenliggende toestanden hebben tussen de begin- en eindtoestand, wat meer flexibiliteit en controle biedt over de geproduceerde visuele effecten.

Animatie aanmaken

Animaties kunnen worden aangemaakt met de @keyframes-regel, waarmee een set CSS-stijlen op verschillende punten in een animatie wordt gedefinieerd. Ook wordt er een naam voor de animatie ingesteld. Deze naam moet beschrijvend zijn, dus aangeven wat voor soort animatie het is.

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

Om de verandering van eigenschappen op een specifiek tijdstip te bepalen, kunnen de sleutelwoorden from (0%) en to (100%) worden gebruikt. Meestal worden de procentuele waarden gebruikt.

@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 */
  }
}

Nadat de animatie is gedeclareerd, kan de naam van de keyframes worden gebruikt als waarde voor de eigenschap animation-name bij verschillende elementen. Een ander voordeel van animaties is dat ze herhaaldelijk op meerdere elementen kunnen worden toegepast.

selector {
  animation-name: AnimationName;
}

Oefening

Voeg animatie toe aan het div-element. De opdracht is om de eigenschap background-color in de tijd te veranderen. De beginstatus is green, bij 60% moet deze red worden, en in de eindstatus is blue vereist. Daarnaast wordt de eigenschap animation-duration gespecificeerd om de animatie zichtbaar te maken.