Tranziții și animații

Ce sunt tranzițiile și animațiile

Mișcarea în interfață are un rol, nu e decor: arată ce s-a schimbat, de unde vine un element și că acțiunea ta a avut efect. CSS îți dă două unelte:

Transition

.btn {
  transition: background-color 150ms ease, transform 150ms ease;
}
.btn:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

transition: <proprietate> <durată> <easing> <întârziere>. Evită transition: all — animă și proprietăți pe care nu le vrei (și costă).

@keyframes și animation

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.toast {
  animation: fade-in 200ms ease-out both;
}

Easing — curba de viteză

Durate: 100–200 ms pentru feedback (hover), 200–300 ms pentru apariții, rar peste 400 ms. Animațiile lungi fac interfața să pară lentă.

Ce animezi — performanța

Animă doar transform și opacity: se calculează pe GPU, fără layout. width, height, top, margin declanșează layout la fiecare cadru → animație sacadată. Explicația în Cum desenează browserul.

Respectă preferința userului

Unii oameni au rău de mișcare sau sensibilitate vestibulară și activează „reduce motion” în sistem. Obligatoriu:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

În Tailwind: motion-safe:animate-… / motion-reduce:transition-none.

Moderne: apariție din display: none

.dialog[open] {
  opacity: 1;
  transition: opacity 200ms, display 200ms allow-discrete;
  @starting-style { opacity: 0; }
}

@starting-style definește starea „de dinaintea apariției” — poți anima elemente care tocmai au trecut din display: none. Pentru tranziții între pagini există View Transitions API.

Mai departe

Pentru animații în React (Motion), timeline-uri și scroll (GSAP) și exemple complete, vezi tema Animații.

Pe scurt

• Transition = de la A la B la o schimbare; animation = @keyframes, pornește singură.
• ease-out la apariție, 150–300 ms; doar transform și opacity.
• prefers-reduced-motion obligatoriu.

Surse oficiale

• MDN — Using CSS transitions
• MDN — Using CSS animations
• MDN — prefers-reduced-motion
• web.dev — Animations guide