Tranziții și animații CSS

Acest tutorial acoperă tot ce trebuie să știi despre tranziții și animații în CSS — de la concepte de bază, la tehnici avansate. Este structurat progresiv, astfel încât să poți învăța pas cu pas, chiar dacă pornești de la zero.

Tranziții CSS - Ghid complet

Tranzițiile CSS permit modificarea lină a valorilor proprietăților stilistice, fără a folosi JavaScript. În loc ca o schimbare să fie instantanee, ea se desfășoară gradual, oferind o experiență vizuală mai fluidă și mai plăcută.

Ce sunt tranzițiile

Tranzițiile sunt efecte vizuale care apar atunci când o proprietate CSS se modifică. Ele pot fi aplicate la hover, focus, activare sau orice altă schimbare de stare.

Proprietăți implicate

transition-property - definește ce proprietate va fi animată
transition-duration - durata tranziției (ex: 0.5s, 200ms)
transition-timing-function - modul în care se desfășoară tranziția (ex: ease, linear)
transition-delay - întârzierea înainte de începerea tranziției

Exemplu simplu de tranziție

Tranziția aplicată mai jos modifică culoarea de fundal la hover, folosind forma extinsă:

🔧 Exemplu live - Tranziție de culoare

<button class="btn">Hover pe mine</button>

.btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.btn:hover {
  background-color: #2ecc71;
}

transition-property

Definește ce proprietate CSS va fi animată. Poate primi:

all - animă toate proprietățile care se pot tranziționa
background-color, width, opacity etc. - animă doar proprietatea specificată
none - dezactivează tranzițiile

🔧 Exemplu live - transition-property

<div class="box">Hover pe mine</div>

.box {
  background-color: #3498db;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.box:hover {
  background-color: #e74c3c;
  width: 250px; /* nu se va anima, pentru că nu e inclusă în transition-property */
}

transition-duration

Definește cât timp durează tranziția. Valori acceptate:

s - secunde (ex: 0.5s)
ms - milisecunde (ex: 200ms)

🔧 Exemplu live - transition-duration

<div class="box">Hover pe mine</div>

.box {
  background-color: #8e44ad;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.box:hover {
  background-color: #f39c12;
}

transition-timing-function

Definește modul în care se desfășoară tranziția în timp. Controlează viteza de evoluție a animației. Valori acceptate:

ease - începe lent, accelerează, apoi încetinește (implicit)
linear - viteza constantă pe tot parcursul tranziției
ease-in - începe lent, apoi accelerează
ease-out - începe rapid, apoi încetinește
ease-in-out - începe și se termină lent
cubic-bezier(x1, y1, x2, y2) - funcție personalizată pentru control avansat

🔧 Exemplu live - transition-timing-function

<div class="box">Hover pe mine</div>

.box {
  background-color: #1abc9c;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.box:hover {
  width: 250px;
}

transition-delay

Definește întârzierea înainte ca tranziția să înceapă. Valori acceptate:

0s - fără întârziere
0.5s, 200ms etc. - întârziere personalizată

🔧 Exemplu live - transition-delay

<div class="box">Hover pe mine</div>

.box {
  background-color: #34495e;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 1s;
}

.box:hover {
  background-color: #9b59b6;
}

Forma prescurtată - `transition`

După ce ai înțeles cum funcționează proprietățile individuale (transition-property, transition-duration, transition-timing-function, transition-delay), poți folosi forma prescurtată transition pentru a le combina într-o singură linie.

Structura generală:>

transition: [property] [duration] [timing-function] [delay];

Exemplu:>

transition: background-color 1s ease 0.5s;

Această linie este echivalentă cu:

transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0.5s;

🔧 Exemplu live - Forma prescurtată

<div class="box">Hover pe mine</div>

.box {
  background-color: #2c3e50;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition: background-color 1s ease 0.5s;
}

.box:hover {
  background-color: #e67e22;
}

Exemplu - Tranziție multiplă cu formă prescurtată

Poți anima mai multe proprietăți în același timp, folosind forma prescurtată:

transition: background-color 0.5s ease, transform 0.3s ease-in;

Acest exemplu animă atât culoarea de fundal, cât și transformarea (scalare) la hover.

🔧 Exemplu live - Tranziție multiplă

<div class="box">Hover pe mine</div>

.box {
  background-color: #2980b9;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition: background-color 0.5s ease, transform 0.3s ease-in;
}

.box:hover {
  background-color: #c0392b;
  transform: scale(1.2);
}

Introducere în animații CSS

Animațiile CSS permit controlul detaliat asupra schimbărilor vizuale, folosind reguli @keyframes și proprietăți dedicate. Spre deosebire de tranziții, animațiile nu depind de o interacțiune directă (hover, click), ci pot fi declanșate automat și pot fi repetate, inversate sau sincronizate.

Diferența dintre tranziții și animații

Tranzițiile> - se declanșează la schimbarea unei proprietăți CSS (ex: hover), sunt mai simple
Animațiile> - se definesc cu @keyframes, pot fi complexe, repetitive și independente de interacțiune

🔧 Exemplu live - Tranziție vs Animație

<div class="box">Hover pe mine</div>

.box {
  background-color: #3498db;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: background-color;
  transition-duration: 0.5s;
}

.box:hover {
  background-color: #e74c3c;
}

/* Animație independentă */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.box {
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Proprietăți implicate în animații CSS

@keyframes - definește etapele animației
animation-name - numele animației (legat de @keyframes)
animation-duration - durata unei iterații
animation-timing-function - modul în care se desfășoară animația
animation-delay - întârzierea înainte de începere
animation-iteration-count - de câte ori se repetă animația
animation-direction - direcția animației (normal, reverse, alternate)
animation-fill-mode - comportamentul înainte/după animație (none, forwards, backwards, both)

🔧 Exemplu live - Animație completă

<div class="box">Animație</div>

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.box {
  background-color: #2ecc71;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

Exemplu simplu de animație - pulsare

Acest exemplu creează o animație de tip „puls” care mărește și micșorează un element în mod repetat.

🔧 Exemplu live - Pulsare

<div class="box">Pulse</div>

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.box {
  background-color: #e74c3c;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-delay: 0s;
}

Exemplu simplu de animație - fade in

Acest exemplu face ca un element să apară treptat, crescând opacitatea de la 0 la 1.

🔧 Exemplu live - Fade In

<div class="box">Fade In</div>

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  background-color: #2980b9;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

Ce sunt funcțiile de temporizare?

Funcțiile de temporizare definesc curba de viteză> a unei animații. Ele determină cum se distribuie mișcarea pe durata animației. Cu alte cuvinte, controlează ritmul cu care un element se transformă în timp.

De exemplu, o animație poate începe lent și accelera spre final, sau invers. Aceste funcții oferă un control fin asupra modului în care utilizatorul percepe mișcarea.

Exemplu live - Funcții de temporizare

<div class="box linear">linear</div>
<div class="box ease">ease</div>
<div class="box ease-in">ease-in</div>
<div class="box ease-out">ease-out</div>
<div class="box ease-in-out">ease-in-out</div>

.box {
  width: 100px;
  height: 40px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 40px;
  margin: 10px;
  position: relative;
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes slide {
  from { left: 0; }
  to   { left: 200px; }
}

.linear      { animation-timing-function: linear; }
.ease        { animation-timing-function: ease; }
.ease-in     { animation-timing-function: ease-in; }
.ease-out    { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }

Exemplu live - Funcție de temporizare steps()

<div class="box">Pas cu pas</div>

@keyframes stepMove {
  from { left: 0; }
  to   { left: 200px; }
}

.box {
  width: 100px;
  height: 40px;
  background-color: #e67e22;
  color: white;
  text-align: center;
  line-height: 40px;
  position: relative;
  animation-name: stepMove;
  animation-duration: 2s;
  animation-timing-function: steps(5);
  animation-iteration-count: infinite;
}

Exemplu live - Funcție de temporizare cubic-bezier()

<div class="box">Bezier</div>

@keyframes move {
  from { left: 0; }
  to   { left: 200px; }
}

.box {
  width: 100px;
  height: 40px;
  background-color: #1abc9c;
  color: white;
  text-align: center;
  line-height: 40px;
  position: relative;
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation-iteration-count: infinite;
}

Animații multiple și control avansat

CSS permite aplicarea mai multor animații simultan pe același element. Fiecare animație poate avea propriul nume, durată, funcție de temporizare și comportament. Prin combinarea lor, poți crea efecte complexe și dinamice.

În plus, proprietăți precum animation-delay, animation-fill-mode și animation-direction oferă control fin asupra modului în care animațiile se comportă înainte, în timpul și după execuție.

Exemplu live - Animații multiple

<div class="box">Bounce & Fade</div>

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.box {
  background-color: #9b59b6;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  opacity: 0;
  animation-name: bounce, fade;
  animation-duration: 1s, 2s;
  animation-timing-function: ease-out, ease-in;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
}

Exemplu - Animație cu formă prescurtată

Poți aplica o animație completă într-o singură linie, folosind forma prescurtată:

animation: bounce 1s ease-in-out infinite alternate;

Acest exemplu face ca elementul să sară vertical la infinit, cu mișcare dus-întors.

🔧 Exemplu live - Animație prescurtată

<div class="box">Bounce</div>

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.box {
  background-color: #27ae60;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  border-radius: 8px;
  animation: bounce 1s ease-in-out infinite alternate;
}

Control avansat al animațiilor

CSS-ul e bun pentru efecte simple, dar dacă vrei să controlezi animațiile cu precizie, intră în scenă JavaScript. Poți detecta când se termină o animație, să le sincronizezi între ele sau să le declanșezi condiționat.

1. Evenimente JavaScript: `animationend`, `transitionend`

Aceste evenimente se declanșează automat când o animație sau tranziție se încheie. Le poți folosi pentru a lansa alte acțiuni sau a schimba stilul.

🔧 Exemplu live - animationend

<div class="box">Animat</div>

@keyframes fadeOut {
  to { opacity: 0; }
}

.box {
  background-color: #3498db;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  animation: fadeOut 2s forwards;
}

document.querySelector(".box").addEventListener("animationend", () => {
  alert("Animația s-a terminat!");
});

2. Sincronizare și chaining

Poți lansa o animație doar după ce alta s-a terminat, folosind animationend sau setTimeout. Asta îți permite să creezi efecte în lanț.

🔧 Exemplu live - chaining

<div class="step1">Pas 1</div><div class="step2">Pas 2</div>

@keyframes show {
  to { opacity: 1; }
}

.step1, .step2 {
  background-color: #2ecc71;
  width: 100px;
  height: 40px;
  margin: 10px;
  color: white;
  text-align: center;
  line-height: 40px;
  opacity: 0;
}

.step1 {
  animation: show 1s forwards;
}

document.querySelector(".step1").addEventListener("animationend", () => {
  document.querySelector(".step2").style.animation = "show 1s forwards";
});

3. Animații condiționate

Poți porni o animație doar dacă se îndeplinește o condiție - de exemplu, dacă un element are o clasă sau dacă utilizatorul face o acțiune.

🔧 Exemplu live - animație condiționată

<button id="trigger">Start</button><div class="target">Animat</div>

@keyframes pulse {
  to { transform: scale(1.2); }
}

.target {
  background-color: #e67e22;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
}

.animate {
  animation: pulse 1s infinite alternate;
}

document.getElementById("trigger").addEventListener("click", () => {
  document.querySelector(".target").classList.toggle("animate");
});

Aplicații practice

Acum că stăpânești animațiile și controlul lor, e timpul să le aplici în interfață. Mai jos ai exemple reale, folosite în site-uri și aplicații moderne.

1. Hover effects

Un efect simplu, dar elegant, care oferă feedback vizual la interacțiune. În acest exemplu, cardul se ridică ușor și își schimbă culoarea la hover.

transition: transform 0.3s ease, background-color 0.3s ease;

🔧 Exemplu live - Hover effect

<div class="card">Hover pe mine</div>

.card {
  background-color: #34495e;
  width: 160px;
  height: 60px;
  color: white;
  text-align: center;
  line-height: 60px;
  border-radius: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  background-color: #2c3e50;
}

2. Loader animat

Un loader animat indică progresul sau așteptarea. Mai jos, un cerc pulsează continuu pentru a sugera activitate.

🔧 Exemplu live - Loader animat

<div class="loader"></div>

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.2); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.loader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e74c3c;
  animation: pulse 1s infinite;
  margin: 20px auto;
}

3. Slide-in menu

Un meniu care se glisează din stânga, iar butonul de deschidere dispare când meniul e activ. La închidere, butonul reapare.

🔧 Exemplu live - Slide-in menu

<button id="openMenu">Deschide Meniu</button>
<div class="menu">
  <button id="closeMenu">×</button>
  <p>Conținutul meniului<p>
</div>

.menu {
  position: fixed;
  top: 0;
  left: -220px;
  width: 200px;
  height: 100%;
  background: #1abc9c;
  color: white;
  padding: 20px;
  transition: left 0.3s ease;
  z-index: 1000;
}

.menu.active {
  left: 0;
}

#openMenu {
  margin: 20px;
  z-index: 1001;
}

#openMenu.hidden {
  display: none;
}

#closeMenu {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

const openBtn = document.getElementById("openMenu");
const closeBtn = document.getElementById("closeMenu");
const menu = document.querySelector(".menu");

openBtn.addEventListener("click", () => {
  menu.classList.add("active");
  openBtn.classList.add("hidden");
});

closeBtn.addEventListener("click", () => {
  menu.classList.remove("active");
  openBtn.classList.remove("hidden");
});

4. Carduri animate

Cardurile pot avea efecte la apariție sau interacțiune. În exemplul de mai jos, ele se animă cu fade-in la încărcare.

🔧 Exemplu live - Carduri animate

<div class="card">Card 1</div><div class="card">Card 2</div>

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  background: #9b59b6;
  color: white;
  width: 120px;
  height: 50px;
  margin: 10px;
  text-align: center;
  line-height: 50px;
  border-radius: 6px;
  animation: fadeIn 0.6s ease forwards;
}

5. Scroll-based animations (cu JS)

Elementele pot apărea cu efecte când intră în viewport.

Elementele se animă automat la scroll, folosind IntersectionObserver pentru a detecta momentul în care intră în viewport.

🔧 Exemplu live - Scroll-based animation cu IntersectionObserver

<div class="spacer">Scroll ↓</div>
<div class="scroll-box">Salut 1</div>
<div class="scroll-box">Salut 2</div>
<div class="scroll-box">Salut 3</div>
<div class="spacer">Scroll ↑</div>

@keyframes appear {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.spacer {
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  color: #aaa;
  font-style: italic;
}

.scroll-box {
  opacity: 0;
  background: #f39c12;
  width: 160px;
  height: 50px;
  margin: 40px auto;
  text-align: center;
  line-height: 50px;
  border-radius: 6px;
  font-weight: bold;
}

.scroll-box.visible {
  animation: appear 0.6s ease forwards;
}

const boxes = document.querySelectorAll(".scroll-box");

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
    }
  });
}, {
  threshold: 0.5
});

boxes.forEach(box => observer.observe(box));

Optimizare și performanță

Animațiile pot îmbunătăți experiența utilizatorului, dar dacă nu sunt bine gândite, pot afecta performanța. În acest capitol, învățăm ce să animăm, cum să folosim GPU-ul și ce practici să aplicăm pentru un UI fluid.

1. Ce proprietăți sunt costisitoare

Nu toate proprietățile CSS sunt egale când vine vorba de performanță. Unele declanșează recalculări complexe și reflow-uri în browser.

❌ Costisitoare: width, height, top, left, margin  
✅ Recomandate: transform, opacity

🔧 Exemplu live - Proprietăți costisitoare vs eficiente

<div class="box">Animat</div>

@keyframes inefficient {
  to { width: 300px; }
}

@keyframes efficient {
  to { transform: scale(1.5); }
}

.box {
  background: #e74c3c;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 20px auto;
  animation: efficient 1s ease forwards;
}

2. GPU vs CPU rendering

Proprietățile precum transform și opacity sunt accelerate de GPU, ceea ce le face ideale pentru animații fluide. Alte proprietăți sunt procesate de CPU și pot cauza sacadări.

animation: transform 1s ease; /* GPU-friendly */  
animation: width 1s ease;     /* CPU-intensive */

🔧 Exemplu live - GPU vs CPU rendering

<div class="gpu">GPU</div><div class="cpu">CPU</div>

@keyframes scaleUp {
  to { transform: scale(1.3); }
}

@keyframes growWide {
  to { width: 300px; }
}

.gpu, .cpu {
  background: #2ecc71;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 10px auto;
}

.gpu {
  animation: scaleUp 1s ease forwards;
}

.cpu {
  animation: growWide 1s ease forwards;
}

3. Best practices

Ca să păstrezi animațiile rapide și fluide, urmează aceste recomandări:

Folosește transform și opacity pentru animații
Evită modificarea layout-ului în timpul animației
Testează pe dispozitive reale, nu doar în browser
Respectă preferințele utilizatorului: @media (prefers-reduced-motion)

🔧 Exemplu live - prefers-reduced-motion

<div class="motion-box">Animație adaptivă</div>

@keyframes pulse {
  to { transform: scale(1.2); }
}

.motion-box {
  background: #9b59b6;
  width: 160px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 20px auto;
  border-radius: 6px;
  animation: pulse 1s infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .motion-box {
    animation: none;
  }
}

Animațiile nu sunt doar decor — ele sunt parte din ritmul și personalitatea unei interfețe. Dar fără optimizare, frumusețea devine balast.

Alegerea proprietăților potrivite, folosirea GPU-ului și respectarea bunelor practici nu sunt opționale, ci esențiale.

Când performanța e fluidă, utilizatorul nu observă animația — o simte. Iar asta face diferența între un site care arată bine și unul care se simte viu.

🧠 Quiz - CSS Tranziții și Animații

Variabile-CSS ➔