Avainkehys

Animaatiossa on vähintään alku- ja lopputila. Ne ovat avainkehyksiä, ja kaikki niiden välissä lasketaan. Tätä kutsutaan interpoloinniksi, englanniksi myös tweeningiksi.

Suomeksi sana elää. Web-kehittäjät sanovat useimmiten keyframe, ja perinteisen piirrosanimaation puolella puhutaan avainkuvista: pääanimaattori piirsi liikkeen tärkeimmät asennot ja avustajat välikuvat niiden väliin.

Miten @keyframes toimii CSS:ssä?

@keyframes-sääntö nimeää animaation ja listaa sen tilat prosentteina kestosta. Avainsanat from ja to tarkoittavat samaa kuin 0 % ja 100 %:

@keyframes nosto { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

Elementtiin animaatio liitetään animation-ominaisuudella, esimerkiksi animation: nosto 400ms ease-out both. Avainkehykset kertovat, mikä muuttuu, ja animation-ominaisuus sen, kuinka kauan muutos kestää ja millä pehmennyksellä. Jos alku- tai loppukehys puuttuu, selain käyttää sen tilalla elementin omia tyylejä.

Kaksi yksityiskohtaa yllättää usein. Avainkehyksen sisään kirjoitettu animation-timing-function koskee vain matkaa seuraavaan kehykseen asti, ei koko animaatiota. Ja !important-merkityt arvot avainkehyksen sisällä selain jättää kokonaan huomiotta.

JavaScriptissä sama malli toimii Web Animations API:n kautta: element.animate([{ opacity: 0 }, { opacity: 1 }], 400). Kehykset annetaan taulukkona ja kesto millisekunteina.

Mitä kannattaa animoida?

Transform ja opacity ovat turvallisimmat. Selain osaa animoida ne laskematta sivun asettelua uudelleen joka kehyksellä. Leveyden, korkeuden tai marginaalin animointi kuormittaa selainta, ja halvemmilla puhelimilla liike nykii.

Isot ja koristeelliset liikkeet kannattaa laittaa prefers-reduced-motion-mediakyselyn taakse. Osa ihmisistä voi pahoin ruudun liikkeestä, ja käyttöjärjestelmän asetus on olemassa heitä varten.

Avainkehys videossa

Videopakkauksessa avainkehys on kokonainen kuva, ja sitä seuraavat kehykset tallentavat vain muutokset. Toisto voi alkaa vain avainkehyksestä, joten niiden väli vaikuttaa tiedostokokoon ja siihen, kuinka tarkasti videota voi kelata.