Què són les animacions i microinteraccions (i per què importen en una web d'empresa)
Les animacions web són moviments visuals que es produeixen quan el visitant interactua amb el teu lloc o quan els elements apareixen a la pantalla. Les microinteraccions són animacions petites i concretes: un botó que canvia de color en passar el cursor, un menú que es desplega amb suavitat, un formulari que confirma l'enviament amb una icona animada.
En una web d'empresa, aquestes senyals no són decoració: comuniquen que el lloc està viu, respon a les accions de l'usuari i està cuidat al detall. Un botó que no reacciona al clic pot semblar trencat; una transició brusca entre seccions transmet descuit. Al revés, moviments subtils i coherents reforcen la percepció de professionalitat i guien l'atenció cap al que importa: la teva proposta de valor, els teus serveis i el formulari de contacte.
El repte és l'equilibri. Massa animacions distreuen, augmenten el pes de la pàgina i poden empitjorar la velocitat i els Core Web Vitals. Aquesta guia t'ajuda a decidir què animar, com fer-ho sense penalitzar el rendiment i quins errors evitar el 2026.
Per què les animacions milloren (o arruïnen) la conversió
En llocs B2B i de serveis, el visitant decide en segons si la teva empresa sembla fiable. Les microinteraccions influeixen en aquesta decisió de forma silenciosa:
- Feedback immediat — l'usuari sap que el seu clic ha funcionat abans que carregui la pàgina següent.
- Jerarquia visual — una animació d'entrada pot dirigir la mirada cap al CTA principal sense cridar.
- Reducció de fricció — transicions suaus entre passos d'un formulari multipas fan el procés més fluid.
- Percepció de qualitat — un lloc que es sent polit transmet que l'empresa cuida els detalls en tot el que fa.
Però l'efecte s'inverte si les animacions són lentes, repetitives o bloquegen la interacció. Un visitant que espera mig segon a que acabi una animació d'entrada abans de poder llegir el contingut se'n anirà. I Google mesura el rendiment real: animacions que provoquen salts de layout o endarrereixen la resposta al clic afecten mètriques com INP (Interaction to Next Paint).
Tipus d'animacions que sí aporten valor
Feedback en botons i CTAs
Els botons de crida a l'acció han de reaccionar a l'hover (en desktop) i al toc (en mòbil): canvi de color, lleugera escala o ombra. Durada recomanada: 150–250 ms. Evita rebots exagerats o efectes que duren més de 300 ms.
Transicions d'estat en formularis
Quan un camp es valida correctament o mostra un error, una transició suau (icona de check, vora en vermell) ajuda l'usuari sense necessitat de llegir un paràgraf de text. Combina-ho amb un bon microcopy per màxima claredat.
Animacions d'entrada (scroll reveal)
Fer aparèixer seccions en fer scroll pot millorar la lectura en pàgines llargues com la de serveis o casos d'èxit. Regla clau: el contingut ha de ser visible i usable fins i tot si JavaScript falla o l'usuari té activada l'opció prefers-reduced-motion del sistema.
Menús i navegació
El menú de navegació en mòbil es beneficia d'una obertura fluida del panell lateral o desplegable. En desktop, submenús amb fade-in de 200 ms són suficients; evita animacions de 500 ms o més que endarrereixen l'accés a les pàgines.
Indicadors de càrrega
Si una acció triga (enviament de formulari, càrrega de resultats), mostra un spinner o barra de progrés. És preferible a deixar l'usuari sense feedback. Mantén l'indicador lleuger: un SVG animat amb CSS pesa molt menys que un GIF o un vídeo.
Animacions que has d'evitar (o usar amb extrema cautela)
- Parallax pesat — desplaçar capes de fons en fer scroll consume recursos i pot provocar mareig. Si l'usas, limita-ho a una secció hero i desactiva-ho en mòbil.
- Autoplay de vídeos o carrusels — distreuen, consumeuen dades i penalitzen la velocitat. Millor un vídeo amb botó de play explícit.
- Animacions en loop infinit — una icona que rebota sense parar competeix amb el contingut principal i cansa.
- Efectes que bloquegen scroll — modals o overlays que impedeixen tancar fins que acaba l'animació generen abandonament immediat.
- Animacions en cada element — si tot es mou, res destaca. Prioritza 2–3 moments clau per pàgina.
Rendiment: animar sense penalitzar la velocitat
Les animacions mal implementades són una de les causes silencioses de webs lentes. Segueix aquestes regles tècniques:
Anima només propietats barates
Usa transform (translate, scale, rotate) i opacity. Evita animar width, height, top, left o margin: obliguen el navegador a recalcular el layout en cada frame i disparen el consum de CPU.
Activa l'acceleració per maquinari
La propietat will-change: transform (usada amb moderació) o un transform: translateZ(0) poden ajudar en animacions complexes, però no l'apliquis a tots els elements: consume memòria GPU innecessàriament.
Respecta prefers-reduced-motion
Molts usuaris activen l'opció de reduir moviment al seu sistema operatiu. El teu CSS ha d'incloure:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}A més de ser bona pràctica d'accessibilitat web, evita que animacions decoratives perjudiquin persones amb sensibilitat vestibular.
No carreguis llibreries pesades només per animar
Llibreries com GSAP o Framer Motion són potents, però afegeixen desenes de KB al bundle. Per la majoria de webs corporatives, CSS transitions i un poc de JavaScript vanilla basten. Si necessites seqüències complexes, carrega la llibreria de forma diferida i només en les pàgines que la requereixin. Combina-ho amb CSS crític i minificació de CSS i JS.
Checklist pràctic abans de publicar animacions
- Aporta claredat o només decora? Si no guia l'usuari ni dóna feedback, elimina-la.
- Dura menys de 300 ms? Les microinteraccions han de sentir-se instantànies.
- Funciona en mòbil? Prova en un dispositiu real, no només en el simulador del navegador. El disseny responsive i les animacions han d'anar de la mà.
- Respecta prefers-reduced-motion? Verifica amb les eines d'accessibilitat del navegador.
- Afecta els Core Web Vitals? Mesura LCP, INP i CLS en Google Search Console o PageSpeed Insights abans i després.
- És coherent amb la teva marca? Mateixa durada, mateixa corba d'easing (ease-out sol funcionar bé) en tot el lloc.
Com encaixa amb la teva estratègia d'UX i conversió
Les animacions són una capa de l'experiència d'usuari (UX). No substitueixen un missatge clar, una proposta de valor convincent o un bon posicionament SEO, però poden ser el detall que converteix una web funcional en una web memorable.
El 2026, amb l'atenció de l'usuari més fragmentada que mai, cada senyal de qualitat compta. Una animació ben executada diu: «aquí hi ha algú que ha pensat en la teva experiència». Una mal executada diu el contrari — i el visitant no tornarà a donar-te una segona oportunitat.
Conclusió: menys és més, però zero no és la resposta
No necessites un lloc ple d'efectes per impressionar. Necessites les animacions justes en els moments justos: feedback al clic, transicions suaus entre estats i entrades discretes que guien la lectura. Mesura l'impacte en velocitat, respecta l'accessibilitat i mantén coherència visual en tot el lloc.
Si la teva web actual no té cap microinteracció o, al contrari, en té massa, pot ser bon moment per una auditoria web. De vegades, treure tres animacions innecessàries i afegir una sola ben pensada al botó de contacte marca la diferència entre un visitant que se'n va i un que escriu.
