transition în CSS

/* proprietate | durată | timing-function | întârziere */
transition: all 0.3s ease;
transition: background-color 0.2s, transform 0.2s;
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);

Ce face transition

transition transformă salturile bruște de stil într-o mișcare lină și plăcută ochiului.

Poți anima culorile de fundal, opacitatea, umbrele sau transformările. Pentru performanță maximă de 60 FPS (fără sacadare), cele mai bune proprietăți de animat sunt transform și opacity (acestea sunt procesate direct pe placa video – GPU).

Valori uzuale

Valoare	Descriere
proprietate	Ce se animă: „background-color”, „transform”, „opacity”, „all”.
durată	Cât durează tranziția (ex. 0.2s, 300ms).
timing-function	Variația vitezei: „ease”, „linear”, „ease-in”, „ease-out”, „ease-in-out”.
delay	Întârzierea până la pornirea tranziției.

Exemple

Exemplul 1: Tranziție fluidă de culoare și scalare la hover

Elementul reacționează instant și lin la acțiunea cursorului.

.buton-interactiv {
  background-color: #2563eb;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.buton-interactiv:hover {
  background-color: #1d4ed8;
  transform: scale(1.05);
}

Efect vizual în browser

La trecerea cu mouse-ul peste buton, acesta își schimbă nuanța lin și se mărește cu 5%, creând un efect tactil.

Greșeli frecvente

• Folosirea transition: all pe tot site-ul; animarea tuturor proprietăților (mai ales width, height, top, left) declanșează recalcularea layout-ului pe tot ecranul (reflow) și cauzează sacadări mari pe telefoane.
• Plasarea proprietății transition doar în interiorul regulii :hover; transition trebuie pus pe starea de bază, altfel la părăsirea cu mouse-ul elementul sare brusc înapoi.

Comenzi înrudite

• transform (translate, rotate, scale, skew): Modifică forma, poziția și unghiul unui element în spațiul 2D sau 3D, fără a deranja elementele vecine.
• animation și @keyframes: Creează animații complexe și autonome pe baza unor cadre cheie (@keyframes), fără a necesita JavaScript.
• Pseudo-clase (:hover, :focus, :active, :nth-child): Stilizează un element în funcție de starea sa (interacțiune cu mouse-ul, tastatura) sau poziția structurală în listă.