UI-animation: transforms, composition og easing

Start med transforms og opacity

Som udgangspunkt bør UI-animation bygges med transform og opacity. De ændrer typisk det visuelle lag uden at flytte rundt på layoutet, og derfor er de ofte mere robuste og lettere at få til at føles smooth end fx animation af width, top eller left.

Det er ikke en hård lov, men en god standardregel. Hvis du animerer andre properties, skal du have en konkret grund til det. Se også MDN om animation performance and frame rate.

Individual transforms: læsbarhed med en fast rækkefølge

translate, rotate og scale er gode, fordi de matcher den måde, man ofte tænker UI-bevægelser på: flyt, drej, skalér.

Det vigtige er, at de individuelle transform-properties har en fast rækkefølge. Ifølge MDN bliver de anvendt som translate, derefter rotate, derefter scale, og til sidst evt. transform. Hvis du selv vil styre den præcise rækkefølge, skal du derfor bruge transform: med funktionskald i den ønskede orden.

Det er præcis det, øvelsen her viser:

animation-composition: når animationer ikke skal overskrive hinanden

Når flere animationer rammer samme property samtidig, er standarden replace: den nye effekt erstatter den underliggende værdi.

animation-composition giver dig i stedet mulighed for at sige, at animationerne skal lægges oven i hinanden (add) eller ophobes (accumulate), alt efter typen af værdi. Det er nyttigt, hvis et element både har en base-tilstand og en ekstra animation, som ikke bare skal nulstille den første.

.icon {
  rotate: 6deg;
  animation: bob 1.2s infinite;
  animation-composition: add;
}

MDN har en god kort reference til animation-composition.

linear(): når easing må være mere præcis

linear() lader dig definere flere progressionspunkter i samme easing-kurve, så du kan bygge mere naturlige spring, stop og efterdønninger end med en enkelt cubic-bezier().

Det er sjældent noget, man skriver helt fra bunden i hånden. Brug hellere en generator som Easing Wizard, og tænk på linear() som et præcist værktøj til motion, der skal føles lidt mere fysisk eller karakterfuld.

MDN forklarer også linear() godt her: linear().