// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
gradient: {
'0%, 100%': { 'background-position': '0% 50%' },
'50%': { 'background-position': '100% 50%' },
},
},
animation: {
'gradient-slow': 'gradient 6s ease infinite',
},
},
},
}Am văzut săptămâna trecută un PR unde un coleg a băgat framer-motion doar ca să animeze un background pe un card de pricing. Mi-a sărit muștarul. Am scos dependența, am scris 6 linii de CSS pur în configurarea de Tailwind și am salvat vreo 30KB din bundle fără să pierdem niciun FPS.
Iată cum faci un gradient animat fluid folosind doar background-position și Tailwind, fără să încarci proiectul cu biblioteci inutile pe client.
De ce background-position și nu altceva?
Dacă încerci să animezi direct proprietatea background sau culorile dintr-un gradient, browserul nu știe să facă tranziția lină între ele în mod nativ. Soluția clasică și ultra-performantă este să faci imaginea de fundal mai mare decât containerul vizibil (de exemplu background-size: 200% 200%) și să plimbi coordonatele background-position de la 0% 50% la 100% 50%.
Browserul procesează asta super rapid, direct pe GPU, iar pe mobil nu-ți sacadează deloc dacă nu pui filtre grele peste. La un proiect recent cu un landing page de 15k vizitatori zilnici, schimbarea asta simplă ne-a crescut scorul de Lighthouse Performance de la 88 la 97 pe dispozitive mobile midrange.
Cum configurezi animația în Tailwind
În Tailwind v3, cea mai curată cale e să extinzi tailwind.config.js adăugând un keyframe custom și clasa aferentă de animație. Dacă folosești Tailwind v4, poți defini asta direct în fișierul tău global CSS folosind directiva @theme.
Odată definită animația, în HTML sau JSX trebuie doar să combini trei chestii principale:
- Dimensiunea fundalului:
bg-[length:200%_200%] - Gradientul dorit:
bg-gradient-to-r from-purple-600 via-pink-500 to-amber-400 - Clasa ta custom de animație:
animate-gradient-slow
Asta e tot. Fără React hooks, fără re-render-uri la fiecare frame, fără event loop blocat pe thread-ul principal de JavaScript.
Trade-off-uri reale: unde e nasol?
Evident, nu există o soluție magică perfectă pentru orice caz. Soluția asta bazată pe CSS pur e excelentă pentru carduri de pricing, hero sections sau border-uri animate la butoane de CTA. Totuși, ai câteva limite clare de care trebuie să ții cont:
- Puncte moarte pe ecrane uriașe: Dacă pui un gradient de 300% pe un container de
100vwpe un monitor ultrawide 4K, GPU-ul va munci serios să randeze rasterizarea imaginii la fiecare cadru. - Tranziții între culori dinamice: Dacă culorile gradientului vin din backend în timp real, e mai complicat să le injectezi direct în configurarea Tailwind. Acolo devine mai practic un inline style cu variabile CSS custom.
- Accesibilitate (A11y): Aveți grijă la contrastul textului peste culorile în mișcare. Dacă textul devine ilizibil la jumătatea animației, pierdeți din conversii și supărați userii.
Voi mai folosiți biblioteci grele de animație pentru chestii din astea simple de UI, sau ați trecut tot pe CSS nativ?