@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient-shift 6s ease infinite;
}Săptămâna trecută făceam audit pe un landing page unde scorul de Lighthouse pe mobile era dezastruos, în jur de 54. Când am deschis package.json, am văzut Framer Motion importat exclusiv pentru un buton de CTA și un card cu gradient animat.
De ce ne complicăm cu JS?
E reflexul clasic de dev modern: ai nevoie de o animație smooth, dai npm install framer-motion. Doar că pentru un simplu efect de hover sau o bordură care își schimbă culoarea fluid, adaugi 30-40KB de JavaScript gzipped pe care browserul trebuie să îl descarce, să îl parseze și să îl execute. La un proiect cu 12k vizitatori zilnici pe mobil, chestia asta îți taie direct din conversii.
Animația de gradient se rezolvă curat în Pure CSS. Trucul e vechi de când lumea: faci fundalul mai mare decât containerul (de exemplu 200% 200%) și îi animi proprietatea background-position.
Cum configurezi totul în Tailwind
Putem integra asta direct în tailwind.config.js sau într-un fișier CSS global. Eu prefer varianta din fișierul CSS principal pentru că e mai ușor de citit de către colegii din echipă.
Odată definită clasa utility, o aplici pe orice element împreună cu clasele native de gradient din Tailwind:
<button class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 animate-gradient text-white px-6 py-3 rounded-xl font-medium">
Apasă aici
</button>
Fără hook-uri, fără stări de React, fără rerender-uri inutile în Virtual DOM.
Trade-off-uri reale: GPU vs Repaint
Să fim sinceri, există și un mic compromis pe care trebuie să îl știi. Animațiile bazate pe transform și opacity rulează direct pe GPU (Compositor thread) și sunt ultra-fluide la 60 FPS.
Atunci când animi background-position, obligi browserul să facă repaint la fiecare cadru. Pentru un buton sau un card de 300px, impactul e practic invizibil pe procesor — am economisit 38KB de JS la build time cu un consum de resurse insignifiant. Dacă vrei însă să pui un gradient animat pe un background fullscreen pe telefoane ieftine, s-ar putea să vezi mici agățări. Pentru fundaluri mari, o opțiune mai bună e să animi un pseudo-element ::before cu transform: translate3d().
Voi cum gestionați animațiile mici de UI? Mergeți pe CSS nativ sau băgați totul prin librării de JS?