<!-- 1. În tailwind.config.js adaugi cheia în extend: -->
<!-- theme: { extend: { animation: { 'gradient-x': 'gradient-x 5s ease infinite' }, keyframes: { 'gradient-x': { '0%, 100%': { 'background-position': '0% 50%' }, '50%': { 'background-position': '100% 50%' } } } } } -->
<h1 class="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-[length:200%_auto] animate-gradient-x">
Performanță pură în CSS
</h1>Am văzut de prea multe ori developeri care trag framer-motion sau gsap în proiect doar ca să animeze un amărât de gradient pe un landing page. E o risipă uriașă de bandă și n-are niciun sens din punct de vedere al performanței. Azi îți arăt cum rezolvi asta în Tailwind cu zero JS adițional, folosind doar CSS pur.
De ce să eviți JS pentru animații simple?
Săptămâna trecută am optimizat un landing page pentru un startup local cu vreo 15k vizitatori unici pe lună. Aveau scoruri destul de slabe pe Core Web Vitals, în special la Largest Contentful Paint (LCP). Când m-am uitat în bundle, am început să râd ca să nu plâng: importaseră o librărie întreagă de animații doar pentru un buton strălucitor și un text cu gradient în secțiunea Hero.
Am eliminat JS-ul ăla inutil, am trecut totul pe CSS nativ și am redus bundle-ul inițial cu exact 38KB (gzipped). Partea cea mai bună? Animația rulează acum la 60fps pe aproape orice telefon ieftin, fiind procesată direct de GPU.
Trucul din spate: background-size și background-position
În mod normal, browserul nu știe să animeze fluid tranziția de la o culoare la alta direct pe proprietatea background-image (deși standardul @property începe să rezolve asta, suportul în browsere e încă problematic).
Așa că trișăm inteligent:
- Generăm un gradient foarte lat (de exemplu, la 200% din lățimea elementului).
- Mutăm poziția background-ului de la stânga la dreapta folosind o animație infinită (
background-position).
Pentru a face asta în Tailwind, adăugăm câteva linii în configurare pentru animație și apoi aplicăm clasele utilitare direct pe element.
Trade-off-uri de care să ții cont
Nimic nu e perfect pe lumea asta, așa că hai să fim sinceri cu dezavantajele:
- Merge brici pentru: Butoane, text (folosind
bg-clip-text), borduri subțiri sau mici elemente decorative. - E nasol pentru: Background-uri care ocupă tot ecranul (full-screen hero). Repaint-ul continuu pe o suprafață atât de mare pe ecrane Retina/4K poate pune în cap procesorul grafic al unui telefon mai vechi. Dacă chiar ai nevoie de asta pe tot ecranul, măcar pune un
will-change: background-positionca să-i dai un indiciu browserului, deși cel mai bine e să eviți suprafețele mari animate continuu.
Voi ce metode folosiți pentru detalii de genul ăsta? Rămâneți la CSS pur sau preferați confortul oferit de o librărie de animații chiar și pentru chestii mărunte?