Animaatiot voivat luoda monimutkaisia ja dynaamisia efektejä, jotka parantavat käyttäjän vuorovaikutuskokemusta. Animaatiot eivät vaadi tiettyä laukaisutapahtumaa ja ne voidaan asettaa toistumaan loputtomasti. Lisäksi animaatioilla voi olla useita välitiloja alku- ja lopputilan välillä, mikä tarjoaa enemmän joustavuutta ja hallintaa tuotettuihin visuaalisiin efekteihin.

Animaation luominen

Animaatioita voidaan luoda käyttämällä @keyframes-sääntöä, joka määrittelee joukon CSS-tyylejä eri kohdissa animaatiota. Lisäksi määritetään animaatiolle nimi. Nimen tulee olla kuvaava, eli kertoa millaisesta animaatiosta on kyse.

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

Ominaisuuksien muutoksen määrittämiseksi tietyssä ajankohdassa voidaan käyttää avainsanoja: from (0%) ja to (100%). Useimmiten käytetään prosenttiarvoja.

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

Kun animaatio on määritelty, voidaan keyframes-nimeä käyttää animation-name-ominaisuuden arvona eri elementeissä. Toinen animaatioiden etu on, että niitä voidaan käyttää toistuvasti useissa elementeissä.

selector {
  animation-name: AnimationName;
}

Harjoitus

Lisätään animaatio div-elementtiin. Tehtävänä on muuttaa background-color-ominaisuutta ajan myötä. Alkutila on green, sitten 60% kohdalla sen tulee olla red, ja lopputilassa tarvitaan blue. Lisäksi määritellään animation-duration-ominaisuus, jotta animaatio näkyy selvästi.