transition-timing-function määrittää siirtymäefektin nopeuskäyrän. Se määrittelee, kuinka nopeasti animaatio alkaa ja loppuu sekä etenemisnopeuden.

transition-timing-function: time_function;

Keskeiset avainsanat, jotka kuvaavat eri time_function-arvoja:

• ease – Oletusarvo. Siirtymäefekti, jossa on hidas alku, nopea keskikohta ja hidas loppu;
• linear – Tasainen nopeus koko siirtymän ajan;
• ease-in – Siirtymäefekti, jossa on hidas alku;
• ease-out – Siirtymäefekti, jossa on hidas loppu;
• ease-in-out – Siirtymäefekti, jossa on hidas alku ja loppu sekä nopea keskikohta.

Tarkastellaan seuraavaa esimerkkiä, jotta nähdään niiden erot. Siirtymä toimii vain, kun container on hover-tilassa.

Cubic Bezier -käyrä

Voimme myös käyttää cubic-bezier()-funktiota luodaksemme mukautetun timing-function-arvon. Tämä funktio ottaa neljä arvoa, jotka edustavat cubic bezier -käyrän ohjauspisteitä ja määrittävät ajoitusfunktion muodon.

Huomio

Ei huolta. Matematiikan osaamista ei tarvita cubic bezier -funktion luomiseen css-ominaisuuden arvoksi. Voimme käyttää https://cubic-bezier.com/ -lähdettä mukautettujen funktioiden luomiseen.

Tarkastellaan seuraavaa esimerkkiä, jotta näemme kuinka helppoa käyttö on. cubic-bezier-funktio luotiin raahaamalla pisteitä kyseisessä lähteessä.

Tämän seurauksena voimme kopioida yllä olevan funktion css-tiedostoomme.