Kesto ja kiihdytys

Kaksi ominaisuutta määrittää, miltä CSS-siirtymä tuntuu: kesto (kuinka kauan animaatio kestää) ja ajoitusfunktio (kuinka animaatio kiihtyy ja hidastuu tuona aikana). Kun nämä valitaan oikein, animaatio tuntuu napakalta ja tarkoitukselliselta eikä hitaalta tai mekaaniselta. Tailwind tarjoaa utilityt molempiin, joten liikkeen tuntumaa on helppo säätää ilman omaa CSS:ää.

Tailwindin duration-*-utilityt määrittävät CSS:n transition-duration-ominaisuuden. Arvot vaihtelevat arvosta duration-75 (75 ms, erittäin napakka) arvoon duration-1000 (1000 ms, yksi kokonainen sekunti). Kun käytät transition-utilityä ilman duration-*-luokkaa, oletuskesto on 150 ms. Useimpien käyttöliittymän vuorovaikutusten tulisi kestää alle 300 ms, jotta käyttö tuntuu nopealta — pidemmät kestot sopivat vain näyttäviin koko sivun animaatioihin.

Keston tulisi vastata muutoksen koettua suuruutta. Pienet vuorovaikutukset, kuten painikkeen hover-tila, kohdistusrenkaat ja linkin värin muutokset, näyttävät parhaimmilta 100–200 ms:n kestolla. Keskikokoiset siirtymät, kuten avattavan valikon ilmestyminen, kortin laajentuminen tai työkaluvihjeen häivyttäminen, toimivat hyvin 200–300 ms:n kestolla. Suuret liikkeet, kuten sivupalkin liukuminen näkyviin, modaalin ilmestyminen tai sivusiirtymät, voivat kestää 300–500 ms. Älä koskaan ylitä 500 ms:n kestoa käyttöliittymän siirtymissä – käyttäjän ei pitäisi koskaan tuntea odottavansa animaatiota.

Ajoitusfunktio (tai easing-funktio) määrittää, miten animaation eteneminen jakautuu ajalle. lineaarinen animaatio liikkuu vakionopeudella. ease-in alkaa hitaasti ja kiihtyy. ease-out alkaa nopeasti ja hidastuu. ease-in-out alkaa ja päättyy hitaasti, ja keskiosa on nopea. Eri vuorovaikutukset tuntuvat luonnollisimmilta eri easing-funktioilla – oikean vaihtoehdon valinta on hienovarainen mutta tärkeä yksityiskohta viimeistellyssä käyttöliittymäsuunnittelussa.

Valinnalla ease-in- ja ease-out-funktioiden välillä on intuitiivinen merkitys: ease-in kasvattaa liike-energiaa (sopii näytöltä poistuville tai kutistuville elementeille), koska liike alkaa hitaasti ja nopeutuu elementin poistuessa. ease-out hidastaa liikettä (sopii näytölle saapuville elementeille), koska ne saapuvat nopeasti ja asettuvat sitten paikalleen pehmeästi. Tämä jäljittelee reaalimaailman fysiikkaa: pysähtyvät asiat yleensä hidastuvat ja liikkeelle lähtevät asiat yleensä kiihtyvät.

ease-in-out tuottaa useimmille käyttöliittymäanimaatioille luonnollisimman tuntuisen liikkeen. Se jäljittelee fyysisten esineiden liikettä: liike alkaa levosta, kiihtyy huippunopeuteen ja hidastuu sitten takaisin lepoon. Käyttäkää sitä oletuksena kaikissa animaatioissa, joissa elementit liikkuvat paikasta toiseen – sivupalkkien liukuminen, modaalien saapuminen, korttien laajentuminen ja haitarien avautuminen tuntuvat kaikki luonnollisimmilta ease-in-out-funktiolla.

delay-*-apuohjelmat lisäävät tauon ennen siirtymän alkamista CSS:n transition-delay-ominaisuuden avulla. Viiveet ovat hyödyllisiä porrastetuissa animaatioissa – kun elementtisarja ilmestyy yksi kerrallaan, syntyy viimeisteltyä vaikutelmaa luova vyöryefekti. Tailwind tarjoaa viiveitä arvosta delay-75 (75 ms) arvoon delay-1000 (1000 ms). Käyttäkää viiveitä hover-vuorovaikutuksissa säästeliäästi – vain hover-tilassa käynnistyvät viiveet tuntuvat käyttäjistä reagoimattomilta.

Jos suunnittelujärjestelmänne tarvitsee tiettyjä ajoitusarvoja, joita Tailwindin oletusasetukset eivät sisällä – esimerkiksi duration-250-arvon tai mukautetun cubic-bezier-easingin – lisätkää ne tiedostoon tailwind.config.js. Laajentakaa transitionDuration-asetusta uusia kestoarvoja varten ja transitionTimingFunction-asetusta uusia easing-käyriä varten. Mukautettu easing voi välittää brändinne liikkeen persoonallisuutta ja saada animaatiot tuntumaan tunnistettavasti omilta.

Hyödyllinen tekniikka hover-vuorovaikutuksissa on käyttää eri ajoituksia sisään- ja poistumiselle. Tämän voi toteuttaa käyttämällä eri kestoja responsive- tai tilaetuliitteiden kanssa. Yleensä hover-tilaan siirtyminen on hieman nopeampaa kuin siitä poistuminen: sisääntulo tuntuu napakalta ja poistuminen häivytetään pehmeämmin. Tämä edellyttää hieman mukautettua CSS:ää tai JavaScriptillä tehtävää luokkien käsittelyä, koska Tailwindissa ei ole valmista un-hover-varianttia.

Usein animoitavien elementtien kohdalla selaimelle voi vihjata, että elementti kannattaa siirtää omalle compositor-tasolleen käyttämällä will-change-ominaisuutta. Tailwindin ytimessä ei ole valmista will-change-apuohjelmaa, mutta voitte lisätä sellaisen arbitrary-arvoilla tai mukautetulla apuohjelmalla. Käyttäkää kuitenkin will-change: transform-ominaisuutta säästeliäästi – liian monien elementtien siirtäminen omille tasoilleen kuluttaa muistia ja voi itse asiassa hidastaa toimintaa.

Chrome DevToolsin siirtymien vianmääritystyökalut ovat erinomaiset. Avatkaa Animations-paneeli (More tools → Animations), niin näette kaikki käynnissä olevat animaatiot ja siirtymät. Voitte selata aikajanaa, toistaa animaatioita hitaammilla nopeuksilla (0.25x, 0.5x) ja tarkastella laskettua ajoitusfunktion käyrää. Näin voitte varmistaa helposti, että kesto- ja easing-valinnat näyttävät täsmälleen tarkoitetuilta ilman, että nopeita animaatioita täytyy yrittää saada kiinni viemällä hiiri niiden päälle nopeasti.

Tässä oppitunnissa opitte, että kestoapuohjelmat arvosta duration-75 arvoon duration-1000 määrittävät siirtymien keston, ease-out sopii parhaiten näytölle saapuville elementeille ja ease-in näytöltä poistuville elementeille, ja delay-*-apuohjelmat lisäävät taukoja ennen siirtymien alkamista mahdollistaen porrastetut animaatioefektit. Seuraavaksi tutustumme Tailwindin valmiisiin keyframe-animaatioihin lataus- ja huomion kiinnittämisen malleja varten.