// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
'gradient-x': {
'0%, 100%': { 'background-position': '0% 50%' },
'50%': { 'background-position': '100% 50%' },
},
},
animation: {
'gradient-x': 'gradient-x 8s ease infinite',
},
},
},
}
// Utilizare în HTML / JSX:
// <div className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-[length:200%_200%] animate-gradient-x">
// Conținutul tău animat
// </div>Salutare! Zilele trecute am făcut curățenie în codul unui landing page care se încărca suspect de greu pe mobil. Am dat peste o decizie destul de bizară luată de fostul dev: adăugase vreo 45KB de Framer Motion în bundle doar ca să animeze un gradient finuț pe fundalul unui buton de Hero și pe un text.
Mi s-a luat de atâta JS irosit aiurea pentru detalii vizuale minore. Am rescris totul în pure CSS, folosind utilitarele din Tailwind și câteva linii în fișierul de configurare. Rezultatul? Am economisit instant timp de încărcare și am obținut exact același efect vizual.
Cum funcționează logica din spate
Ideea de bază este extrem de simplă și n-are nicio legătură cu framework-urile moderne. Nu animăm culorile în sine (ceea ce ar fi destul de greu de calculat pentru browser), ci mișcăm poziția fundalului.
Practic, creăm un gradient care are de două ori dimensiunea elementului nostru (de exemplu, 200% lățime). Din starea inițială, vedem doar jumătatea stângă a gradientului. Printr-o animație infinită, mutăm poziția fundalului spre dreapta, apoi o aducem înapoi. Browserul face o tranziție fluidă între aceste stări, creând iluzia că culorile se topesc și se mișcă organic.
Pasul 1: Extinderea configurării în tailwind.config.js
Pentru că Tailwind nu vine implicit cu o animație pentru poziția fundalului, trebuie să definim noi keyframes-urile și clasa de animație în config. Nu te speria, durează fix 10 secunde.
Adăugăm o animație numită gradient care rulează la nesfârșit, alternând direcția pentru a nu avea un salt brusc când se resetează ciclul.
Pasul 2: Aplicarea claselor în HTML/React
După ce ai configurat animația, tot ce trebuie să faci este să aplici clasele pe elementul tău.
Folosim bg-[length:200%_200%] pentru a mări fundalul (aceasta este o clasă utilitară arbitrară din Tailwind) și apoi aplicăm animația configurată de noi. Culorile le poți alege cum vrei tu prin clasele standard de gradient.
Trade-off-uri sincere: Când merită și când nu
Ca orice soluție în web development, și asta vine cu plusuri și minusuri pe care trebuie să le pui în balanță înainte să o arunci în producție.
De ce îmi place abordarea asta:
- Performanță brută: Zero milisecunde timp de execuție JS. Browserul se ocupă singur de animație.
- Bundle size minim: Nu adaugi nicio librărie terță. Ai doar câteva reguli CSS generate la build-time.
- Simplitate: E extrem de ușor de întreținut și de modificat culorile direct din clasele Tailwind.
Unde devine problematică:
- Repaint-uri în browser: Proprietatea
background-positionforțează browserul să facă repaint la fiecare cadru. Pe un ecran uriaș 4K, dacă aplici această animație pe tot ecranul (pe elementulbody), s-ar putea să observi o creștere a utilizării procesorului pe laptopurile mai vechi. - Limitări de design: Dacă vrei mișcări super complexe, non-liniare sau interacțiuni bazate pe scroll-ul utilizatorului, CSS-ul simplu devine destul de rigid.
Dacă ai nevoie de acest efect pentru butoane, carduri, text-gradients sau secțiuni mici, metoda asta este de zece ori mai curată decât orice script JS.
Tu cum procedezi când ai de făcut micro-interacțiuni din astea? Mergi direct pe CSS sau arunci cu biblioteci de animații în proiect doar pentru că sunt la îndemână?