Generator cubic-bezier CSS (easing)

Exemple de curbe cubic-bezier

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

ease-out pentru apariții Pornește repede și se oprește lin; potrivit pentru elemente care intră în ecran.

.element {
  transition: transform 0.3s ease-out;
}

ease-in-out pentru mișcări Lent la ambele capete; bun pentru elemente care se mută dintr-un loc în altul.

.element {
  transition: transform 0.5s ease-in-out;
}

easeOutExpo Foarte rapid la început, apoi frânează lung; dă o senzație de interfață fluidă.

.element {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

easeInOutCubic O variantă mai pronunțată a lui ease-in-out, pentru slidere și carusele.

.element {
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

easeOutBack (sare puțin) Trece de poziția finală și revine; pentru butoane și notificări jucăușe.

.element {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

easeInBack (ia avânt) Se retrage puțin înainte să plece; pentru elemente care ies din ecran.

.element {
  transition: transform 0.4s cubic-bezier(0.36, 0, 0.66, -0.56);
}

easeInOutBack Depășire la ambele capete; efect elastic vizibil.

.element {
  transition: transform 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

linear pentru rotații Viteză constantă; potrivit pentru indicatoare de încărcare care se rotesc continuu.

.element {
  transition: transform 1s linear;
}

Cum folosești generatorul de cubic-bezier

Trage de cele două puncte colorate sau alege o curbă cunoscută (ease, ease-in-out, easeOutBack etc.).
Apasă Redă animația ca să compari curba ta cu o mișcare liniară.
Copiază codul: generatorul îți dă atât forma scurtă transition, cât și doar transition-timing-function.

Ce reprezintă curba

Pe axa orizontală este timpul, pe cea verticală progresul animației. O curbă abruptă la început înseamnă o pornire rapidă; o curbă plată înseamnă o mișcare lentă. cubic-bezier(x1, y1, x2, y2) primește coordonatele celor două puncte de control; capetele sunt mereu (0, 0) și (1, 1).

.buton {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.buton:hover {
  transform: scale(1.05);
}

Valorile x trebuie să fie între 0 și 1. Valorile y pot ieși din interval: peste 1 animația trece de valoarea finală și revine (efect elastic), sub 0 pornește întâi în sens invers.

Cuvintele cheie

ease = cubic-bezier(0.25, 0.1, 0.25, 1), valoarea implicită pentru transition
linear = cubic-bezier(0, 0, 1, 1)
ease-in = cubic-bezier(0.42, 0, 1, 1)
ease-out = cubic-bezier(0, 0, 0.58, 1)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

Întrebări frecvente

Ce curbă folosesc pentru interfețe?

Pentru elemente care apar, o curbă de tip ease-out (pornire rapidă, oprire lină) pare cea mai naturală. Pentru elemente care ies din ecran, ease-in.

Merge și cu @keyframes?

Da. Pune funcția în animation-timing-function; se aplică între fiecare pereche de cadre cheie, nu pe toată animația.