Joskus on tarpeen luoda animaatioita verkkosivun elementtien muutoksille halliten esimerkiksi nopeutta, viivettä ja kestoa. Näissä tapauksissa voidaan käyttää transition-ominaisuutta tämän toteuttamiseen.

Elementillä on aina kaksi tilaa: alkutila ja lopputila. Elementin muutoksen käyttäytymistä voidaan hallita seuraavilla ominaisuuksilla:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 

• transition-property – Sen CSS-ominaisuuden nimi, jota halutaan animoida;
• transition-duration – Aika, jonka kuluessa elementin tila muuttuu. Määritellään sekunteina (s) tai millisekunteina (ms);
• transition-timing-function – Määrittää siirtymän nopeuskäyrän. Tyypillisiä arvoja ovat ease, linear, ease-in, ease-out ja ease-in-out;
• transition-delay – Viive ennen siirtymäefektin alkamista. Määritellään sekunteina (s) tai millisekunteina (ms).

Jokainen ominaisuus käsitellään tarkemmin tässä kurssissa.

Huomio

1 sekunti = 1000 millisekuntia. Joten:

• 0.1s = 100ms;
• 2.5s = 2500ms;
• 0.5s = 500ms.

Harjoitus

Esimerkiksi haluamme lisätä transition-efektin div-elementin taustaväriin, kun sitä leijutetaan. Tehtävänä on:

• Muuttaa background-color-ominaisuutta;
• Viiveen tulee olla 0.1 sekuntia;
• Värin muutoksen tulee kestää 0.3 sekuntia;
• timing-function-arvoksi odotetaan ease-in-out, mikä tarkoittaa, että muutos alkaa hitaasti, nopeutuu keskellä ja hidastuu lopussa.

Leijuta elementin päällä kursorilla nähdäksesi tuloksen.

Määritimme kaikki siirtymään liittyvät ominaisuudet div-elementille ja sitten hover-tilassa asetimme vain haluamamme koristelun.