Fade in / Fade out
Elementul apare sau dispare schimbându-și opacitatea.
O notificare toast care apare și dispare singură.
Vocabularul Animațiilor
Dicționarul celor mai comune modele de animație: folosește aceste nume ca să-i descrii AI-ului mișcarea pe care o vrei când faci vibe coding. Fiecare intrare are o previzualizare live.
Inspirat de excelenta muncă a lui Emil Kowalski · animations.dev, cu o previzualizare adăugată la fiecare intrare.
Același vocabular există și ca skill de instalat în agentul tău: aici cauți tu numele, acolo le știe deja el.
91 termeni
Intrări și ieșiri
Cum apar și dispar elementele.
Slide in
Elementul intră alunecând din afara ecranului (din stânga, din dreapta, de sus sau de jos).
Un panou lateral care intră din dreapta la click.
Scale in
Elementul crește de la mic la dimensiunea completă în timp ce apare, adesea împreună cu un fade.
Un card care crește în timp ce își deschide detaliile.
Pop in
Elementul apare cu un mic overshoot, de parcă ar sări în locul lui.
Insigna unei notificări noi care apare jucăuș.
Reveal
Conținutul este dezvăluit treptat, de obicei animând un clip-path sau o mască.
O imagine hero care se dezvăluie de la stânga la dreapta.
Enter / Exit
Animația pe care o execută un element când este adăugat sau eliminat de pe ecran.
Elementele unei liste care intră și ies la filtrare.
Secvențe și timpi
Coordonarea mai multor elemente sau momente.
Keyframes
Puncte definite ale unei animații (0%, 50%, 100%) între care browserul completează spațiile.
Un logo care sare între mai multe poziții definite.
Interpolation / Tween
Generarea tuturor cadrelor intermediare între o valoare inițială și una finală, ca mișcarea să fie continuă.
O bară de progres care alunecă lin până la țintă.
Stagger
Animarea mai multor elemente unul după altul cu o mică întârziere între ele, creând o cascadă.
Opțiunile unui meniu care apar una după alta.
Orchestration
Sincronizarea intenționată a mai multor animații ca să pară o singură mișcare coordonată.
Hero, titlu și CTA care intră într-o secvență coordonată.
Delay
Timpul înainte ca o animație să înceapă.
Un tooltip care apare după o jumătate de secundă de așteptare.
Duration
Cât durează o animație.
Un accordion lent și moale în loc de unul instant.
Fill mode
Dacă un element păstrează stilurile primului sau ultimului cadru înainte sau după animație (ex. forwards).
Un element care rămâne în poziția finală la sfârșitul animației.
Stepped animation
O animație împărțită în pași discreți, ca un cronometru care numără invers.
O numărătoare inversă care sare secundă cu secundă.
Mișcare și transformări
Schimbarea poziției, dimensiunii sau unghiului unui element.
Translate
Deplasarea unui element pe axa X sau Y.
Un buton care se mută pentru a face loc unui meniu.
Scale
Mărirea sau micșorarea unui element.
Un thumbnail care se mărește la trecerea mouse-ului.
Rotate
Rotirea unui element în jurul unui punct.
Iconița unui meniu care se rotește într-un X.
Skew
Înclinarea unui element pe axa X sau Y, deformându-l din forma sa dreptunghiulară.
Un banner promoțional înclinat pentru dinamism.
3D tilt / Flip
Rotirea în spațiul 3D (rotateX / rotateY) pentru a adăuga profunzime.
Un card care se întoarce pentru a-și arăta spatele.
Perspective
Cât de puternic pare efectul 3D: o valoare mică exagerează profunzimea, ca și cum privitorul ar fi mai aproape.
O copertă care se înclină în 3D urmărind cursorul.
Transform origin
Punctul de ancorare din care crește sau se rotește un scale sau o rotație.
Un tooltip care crește din colț în loc de din centru.
Origin-aware animation
Elementul se animă pornind de la ce l-a declanșat, ca un popover care crește din butonul care l-a deschis, nu din propriul centru.
Un popover care explodează din butonul care l-a deschis.
Tranziții între stări
Legarea unei stări, a unei vederi sau a unui element de altul.
Crossfade
Un element dispare treptat în timp ce altul apare treptat, în același loc.
Două fotografii dintr-o galerie care se dizolvă una în cealaltă.
Continuity transition
O schimbare care menține utilizatorul orientat legând vizual înainte și după, de exemplu mărind și micșorând același dreptunghi.
Un card care se extinde păstrându-și forma.
Morph
O formă se transformă lin în alta, ex. Dynamic Island.
Dynamic Island care se lărgește pentru un apel.
Shared element transition
Un element călătorește și se transformă dintr-o poziție în alta, ca un thumbnail care se extinde într-un card.
Un thumbnail care devine coperta pe tot ecranul.
Layout animation
Când dimensiunea sau poziția unui element se schimbă, el se animă spre noul punct în loc să sară brusc acolo.
Cardurile unei grile care se repoziționează la reordonare.
Accordion / Collapse
O secțiune își extinde și își restrânge lin înălțimea pentru a arăta sau ascunde conținut.
Un FAQ care își deschide și închide răspunsul.
Direction-aware transition
Conținutul alunecă într-o direcție mergând înainte și în direcția opusă mergând înapoi, dând navigării un sens al direcției.
Slide-urile care merg înainte sau înapoi în funcție de tastă.
Scroll
Mișcare legată de scroll sau de navigarea între vederi.
Scroll reveal
Elementele apar treptat sau alunecă la locul lor când intră în viewport.
Secțiunile care apar în timp ce derulezi landing page-ul.
Scroll-driven animation
O animație al cărei progres este legat direct de poziția de scroll.
O bară de citire care se umple odată cu scroll-ul.
Parallax
Fundalul și prim-planul se mișcă cu viteze diferite în timpul scroll-ului, creând profunzime.
Fundalul care se derulează mai lent decât prim-planul.
Page transition
O animație care rulează la navigarea de la o pagină sau rută la alta.
O disoluție între o pagină și cealaltă.
View transition
Browserul face morphing între două stări sau pagini, legând elementele partajate.
Un articol care se deschide din previzualizarea lui din feed.
Feedback și interacțiune
Răspunsul la acțiunile utilizatorului. (Treci cu mouse-ul peste previzualizări.)
Hover effect
Schimbare vizuală când cursorul trece peste un element.
Un buton care se luminează la trecerea mouse-ului.
Press / Tap feedback
O ușoară micșorare la click, ca elementul să pară fizic.
O tastă care se apasă ușor la click.
Hold to confirm
Un efect de progres care se umple în timp ce utilizatorul ține apăsat un buton.
Un buton 'Șterge' pe care îl ții apăsat pentru a confirma.
Drag
Deplasarea unui element apucându-l, adesea cu inerție la eliberare.
O fotografie pe care o tragi pentru a o muta pe canvas.
Drag to reorder
Tragerea elementelor dintr-o listă pentru a le reordona, în timp ce celelalte se mută pentru a face loc.
O listă de sarcini pe care o reordonezi trăgând elementele.
Swipe to dismiss
Tragerea unui element în afara ecranului pentru a-l închide, ca un drawer sau un toast.
O notificare pe care o închizi trăgând-o cu degetul.
Rubber-banding
Rezistență și revenire elastică atunci când tragi dincolo de o limită (senzația de overscroll de pe iOS).
Lista care se întoarce elastic când derulezi dincolo de final.
Shake / Wiggle
Un tremur rapid dintr-o parte în alta care semnalează o eroare sau un input respins.
Un câmp de parolă care tremură dacă parola e greșită.
Ripple
Un cerc care se extinde din punctul atingerii, confirmând apăsarea.
Unda care pornește din punctul în care atingi un buton.
Easing
Cum se schimbă viteza pe parcursul unei animații.
Easing
Ritmul cu care o animație accelerează sau încetinește.
Un meniu care pornește decis și încetinește lin la final.
Ease-out
Începe rapid, se termină lent. Setarea implicită pentru majoritatea UI-ului și pentru tot ce răspunde utilizatorului.
Un panou care intră rapid și se așază calm.
Ease-in
Începe lent, se termină rapid. De obicei evitată: poate părea moale.
Un element care iese din scenă accelerând.
Ease-in-out
Lent, rapid, lent. Bun pentru elementele deja pe ecran care se mută din A în B.
O cutie care se mută lin dintr-o parte în alta.
Linear
Viteză constantă. De evitat în UI; rezerv-o pentru spinnere sau marquee.
Un spinner care se rotește cu viteză constantă.
Cubic-bezier
O curbă de easing personalizată pe care o definești pentru control precis.
O tranziție personalizată cu un mic overshoot.
Asymmetric easing
O curbă care accelerează și decelerează în ritmuri diferite. Pare mai vie decât una simetrică.
O mișcare care pornește lent și frânează brusc.
Animații cu arc
Mișcare bazată pe fizică, alternativă la easing-ul cu durată fixă.
Spring
Mișcare ghidată de fizică (tensiune, masă, amortizare) în loc de o durată fixă.
Un panou care intră cu o săritură naturală.
Stiffness / Tension
Cât de puternic trage arcul spre țintă. Mai mare, mai vioi.
Un meniu vioi care ajunge instant în poziție.
Damping
Cât de repede se așază un arc. Amortizare mică înseamnă mai multă săritură și oscilație.
Un toggle care oscilează puțin înainte de a se opri.
Mass
Cât de greu pare elementul animat. Mai multă masă îl face mai lent și mai leneș.
Un element greu care se mișcă lent și hotărât.
Bounce
Un arc care depășește ținta și se așază, adăugând jucăușenie.
Un emoji care aterizează sărind pe ecran.
Perceptual duration
Cât de terminat pare un arc, chiar dacă încă se micro-așază pe dedesubt.
Un arc care pare oprit dar încă se așază.
Momentum
Mișcare care își duce mai departe viteza, mai ales după un drag sau o întrerupere.
O listă care continuă să deruleze după swipe.
Velocity
Cât de repede și în ce direcție se mișcă un element. Un arc o duce mai departe în animația următoare când e întreruptă.
Un element aruncat care își păstrează avântul.
Interruptible animation
O animație care poate fi redirecționată lin pe la jumătate în loc să se termine mai întâi.
Un meniu care își schimbă cursul dacă îl închizi pe la jumătate.
Loop și mișcare ambientală
Animații care rulează de la sine.
Marquee
Text sau conținut care derulează continuu în buclă.
O bandă de logo-uri de clienți care derulează continuu.
Loop
O animație care se repetă, de un număr definit de ori sau la infinit.
O iconiță de încărcare care se rotește la infinit.
Alternate (yoyo)
Un loop care merge înainte și apoi înapoi la fiecare repetare, în loc să sară brusc la început.
O săgeată 'derulează în jos' care merge sus și jos.
Orbit
Un element care se rotește în jurul altuia pe un traseu continuu.
Niște puncte care orbitează în jurul unui loader.
Pulse
O schimbare delicată și repetată de scală sau opacitate pentru a atrage atenția.
Un punct de notificare care pulsează pentru a atrage privirea.
Float
O oscilație lentă și continuă în sus și în jos care face să pară viu și ușor un element static.
O ilustrație care plutește ușor în hero.
Idle animation
Mișcare subtilă care rulează în timp ce un element stă pur și simplu acolo, așteptând o interacțiune.
Un personaj care respiră în timp ce așteaptă un input.
Finisaje și efecte
Micile detalii care despart binele de excelent.
Blur
Un filtru de blur folosit pentru a înmuia un element sau a masca mici imperfecțiuni.
Fundalul care se blurează când deschizi o modală.
Clip-path
Decuparea unui element într-o formă, folosită pentru reveal-uri, măști și sliderele înainte/după.
O imagine decupată în formă de romb care își schimbă forma.
Mask
Ascunderea sau dezvăluirea unor părți dintr-un element cu o formă sau un gradient — ca un clip-path, dar cu margini moi și estompabile.
Un text dezvăluit de o reflexie care trece peste el.
Before / after slider
Un separator care se trage și face tranziția între două imagini suprapuse pentru a le compara.
O comparație înainte/după a unei fotografii retușate.
Line drawing
Un traseu SVG care se desenează singur, ca și cum ar fi trasat de un stilou invizibil.
O semnătură sau o iconiță care se desenează singură.
Text morph
Text care se animă caracter cu caracter când se schimbă, atrăgând atenția asupra noii valori.
Un preț care se schimbă animându-și cifrele.
Skeleton / Shimmer
Un substituent cu o reflexie în mișcare, afișat cât timp se încarcă conținutul.
Substituenții strălucitori cât timp se încarcă feedul.
Number ticker
Cifre care se rotesc sau urcă până la o valoare.
Un contor de abonați care urcă până la total.
Tabular numbers
Cifre cu lățime fixă, ca numerele să nu 'sară' când se schimbă. Esențial pentru tickere, cronometre și contoare.
Un cronometru care nu tremură când cifrele se schimbă.
Typewriter
Text care apare câte un caracter o dată, ca și cum ar fi scris pe loc.
Un titlu care se scrie caracter cu caracter.
Performanță
Ce anume ține mișcarea lină în loc de sacadată.
Frame rate (FPS)
Cadre desenate pe secundă. 60fps este baza pentru o mișcare lină; 120fps pe ecranele mai noi.
O mișcare lină la 60fps fără sacadări.
Jank
Sacadare vizibilă când browserul pierde cadre pentru că nu reușește să țină pasul cu animația.
Sacadarea de evitat când animația se chinuie.
Dropped frame
Un cadru pe care browserul nu a reușit să-l deseneze la timp, provocând un mic sughiț în mișcare.
Sughițul când browserul sare peste un cadru.
Compositing
Lăsarea GPU-ului să mute sau să estompeze un element pe propriul strat fără să refacă layout-ul sau paint-ul.
Mutarea unui element prin GPU fără a redesena.
will-change
Un indiciu CSS că un element urmează să se animeze, ca browserul să îl poată promova pe stratul lui din timp.
Avertizarea browserului că un meniu urmează să se deschidă.
Layout thrashing
Animarea unor proprietăți precum width, height, top sau left, care obligă browserul să recalculeze layout-ul la fiecare cadru, provocând jank.
Greșeala de a anima width în loc de transform.
Principii de cunoscut
Concepte care ghidează când și cum să animezi.
Purposeful animation
Mișcarea trebuie să servească un scop — să orienteze, să dea feedback, să arate relații — nu doar să decoreze.
O animație care ghidează privirea, nu doar decorează.
Anticipation
O mică pregătire în direcția opusă înainte de o mișcare, anticipând ce urmează să se întâmple.
O mică pregătire înainte ca un element să pornească.
Follow-through
Părți ale unui element continuă să se miște și se așază ușor după ce mișcarea principală se oprește, adăugând greutate.
O coadă care continuă să se miște după oprire.
Squash & stretch
Deformarea unui element în timp ce se mișcă pentru a transmite greutate, viteză și flexibilitate.
O minge care se turtește când sare.
Perceived performance
Animația potrivită face o interfață să pară mai rapidă, chiar și atunci când nu este.
Un skeleton care face încărcarea să pară mai rapidă.
Frequency of use
Cu cât un utilizator vede o animație mai des, cu atât ar trebui să fie mai scurtă și mai subtilă.
O animație scurtă pentru că o vezi de o mie de ori pe zi.
Spatial consistency
Animarea astfel încât un element să-și păstreze identitatea și poziția între stări, ca utilizatorul să nu piardă niciodată din vedere unde sunt lucrurile.
Un meniu care se întoarce mereu de unde a ieșit.
Hardware acceleration
Animarea transform și opacity lasă GPU-ul să mențină mișcarea lină.
Animarea transform și opacity pentru a rămâne lin.
Reduced motion
Respectarea setării prefers-reduced-motion a utilizatorului, atenuând sau eliminând mișcarea.
Dezactivarea mișcării pentru cei care suferă de rău de mișcare.
Nicio animație găsită
Încearcă alt termen, de exemplu „spring”, „fade” sau „scroll”.
Continuă să explorezi
S-ar putea să-ți placă și
Ghiduri, cursuri și instrumente alese pentru tine, pornind de la această pagină.
Ghid
Google Search Console în Claude Code
Datele Search Console direct în terminal.
Curs
Deploy de la zero: de la cod la link
Deploy pe Vercel, fără tehnicisme: de la proiectul pe care îl ai pe GitHub la un link pe care îl poți trimite oricui — și apoi propriul domeniu deasupra.
Asset
+7 Brief Clar
Foaia de adus la call
Ghid
De la brief confuz la UX/UI complet
Un brief confuz devine o aplicație funcțională.
Curs
Git și GitHub pentru vibe coder
Ai creat un proiect cu Claude Code sau Codex: aici înveți să-l pui pe GitHub, să te întorci înapoi dacă se strică, și să te lași ajutat de alții.
Asset
+3 Skill-uri de Design
Skill-uri AI pentru designeri