Varaktighet och easing

Två egenskaper avgör hur en CSS-övergång känns: duration (hur länge animationen pågår) och timing function (hur animationen accelererar och bromsar in under den tiden). När dessa väljs rätt är skillnaden mellan animationer som känns snabba och avsiktliga och sådana som känns tröga eller mekaniska. Tailwind tillhandahåller utilities för båda, vilket gör det enkelt att finjustera rörelsekänslan utan egen CSS.

Tailwinds utilities duration-* anger CSS-egenskapen transition-duration. Värdena sträcker sig från duration-75 (75 ms, mycket snabbt) till duration-1000 (1000 ms, en hel sekund). Standardvaraktigheten när Ni använder transition utan en klass för duration-* är 150 ms. De flesta interaktioner i användargränssnitt bör vara kortare än 300 ms för att kännas responsiva – längre varaktigheter passar endast för dramatiska animationer på sidnivå.

Varaktigheten bör motsvara den upplevda storleken på förändringen. Små interaktioner, som hovring över knappar, fokusringar och färgförändringar på länkar, ser bäst ut vid 100–200 ms. Medelstora övergångar, som när en listruta visas, ett kort expanderas eller ett verktygstips tonas ut, fungerar bra vid 200–300 ms. Stora rörelser, som när ett sidofält skjuts in, en modalruta visas eller en sida byts ut, kan ta upp till 300–500 ms. Överskrid aldrig 500 ms för övergångar i användargränssnittet – användare ska aldrig känna att de väntar på en animering.

Tidsfunktionen (eller funktionen för mjukstart och mjukavslutning) styr hur animeringens förlopp fördelas över tid. En linjär animering rör sig med konstant hastighet. En ease-in börjar långsamt och accelererar. En ease-out börjar snabbt och bromsar in. En ease-in-out börjar och slutar långsamt, med hög hastighet i mitten. Olika interaktioner känns mest naturliga med olika mjukningar – att välja rätt är en subtil men viktig detalj i en väl genomarbetad design av användargränssnitt.

Valet mellan ease-in och ease-out har en intuitiv innebörd: ease-in bygger upp fart och passar bra för element som lämnar skärmen eller fälls ihop, eftersom de börjar långsamt och ökar hastigheten när de försvinner. ease-out bromsar in och passar bra för element som kommer in på skärmen, eftersom de anländer snabbt och mjukt faller på plats. Detta återspeglar fysiken i verkligheten – saker som stannar tenderar att bromsa in, medan saker som börjar röra sig tenderar att accelerera.

ease-in-out skapar den mest naturliga rörelsen för de flesta animeringar i användargränssnitt. Det efterliknar hur fysiska objekt rör sig: de börjar från stillastående, når sin högsta hastighet och bromsar sedan in till stillastående igen. Använd det som standard för alla animeringar där element flyttas mellan positioner – sidofält som skjuts in, modala fönster som visas, kort som expanderas och dragspelskomponenter som växlar känns alla mest naturliga med ease-in-out.

Verktygen delay-* lägger till en paus innan övergången börjar genom CSS-egenskapen transition-delay. Fördröjningar är användbara för stegvisa animeringar – när en serie element visas efter varandra skapas en kaskadeffekt som känns genomarbetad. Tailwind tillhandahåller fördröjningar från delay-75 (75 ms) till delay-1000 (1000 ms). Använd fördröjningar sparsamt för hovringsinteraktioner – fördröjningar som endast utlöses vid hovring kan få gränssnittet att kännas trögt för användaren.

Om designsystemet kräver specifika tidsvärden som inte finns bland Tailwinds standardvärden – till exempel duration-250 eller en anpassad cubic-bezier-mjukning – lägger du till dem i tailwind.config.js. Utöka transitionDuration med nya varaktighetsvärden och transitionTimingFunction med nya mjukningskurvor. Anpassad mjukning kan förmedla ert varumärkes rörelsekaraktär och göra animeringarna tydligt förknippade med just ert varumärke.

En användbar teknik för hovringsinteraktioner är att ha olika tidsinställningar för när ett element visas och försvinner. Det kan uppnås genom att tillämpa olika varaktigheter med responsiva prefix eller tillståndsprefix. Vanligast är att övergången när pekaren förs över ett element är något snabbare än övergången när den förs bort – inträdet känns snabbt och utträdet tonas ut mjukare. Detta kräver en liten mängd anpassad CSS eller manipulering av klasser med JavaScript, eftersom Tailwind inte har någon inbyggd variant för när hovring avslutas.

För element som animeras ofta kan du ge webbläsaren en antydan om att de ska flyttas till ett eget kompositlager med will-change. Tailwind har inget inbyggt will-change-verktyg i kärnan, men du kan lägga till ett via godtyckliga värden eller ett anpassat verktyg. Använd dock will-change: transform sparsamt – om för många element flyttas till egna lager slösas minne och prestandan kan faktiskt försämras.

Chrome DevTools har utmärkta verktyg för felsökning av övergångar. Öppna panelen Animations (More tools → Animations) för att se alla animeringar och övergångar som körs. Du kan dra genom tidslinjen, spela upp animeringar igen i lägre hastighet (0.25x, 0.5x) och granska kurvan för den beräknade tidsfunktionen. Det gör det enkelt att kontrollera att dina val av varaktighet och mjukning ser ut precis som avsett, utan att du behöver hovra snabbt för att hinna se korta animeringar.

I den här lektionen lärde du dig att verktyg för varaktighet från duration-75 till duration-1000 styr hur lång tid övergångar tar, att ease-out passar bäst för element som kommer in på skärmen och ease-in för element som lämnar den, samt att verktygen delay-* lägger till pauser innan övergångar börjar och möjliggör stegvisa animeringseffekter. Härnäst utforskar vi Tailwinds inbyggda keyframe-animeringar för laddnings- och uppmärksamhetsmönster.