Vocabolario delle Animazioni | Keyword per il Vibe Coding

Entrate e uscite

Come gli elementi appaiono e scompaiono.

Fade in / Fade out

L'elemento appare o scompare cambiando opacità.

Una notifica toast che appare e svanisce da sola.

Slide in

L'elemento entra scivolando da fuori schermo (da sinistra, destra, alto o basso).

Un pannello laterale che entra da destra al click.

Scale in

L'elemento cresce da piccolo a dimensione piena mentre appare, spesso insieme a un fade.

Una card che cresce mentre apre il suo dettaglio.

Pop in

L'elemento appare con un leggero overshoot, come se rimbalzasse al suo posto.

Il badge di una nuova notifica che spunta giocoso.

Reveal

Il contenuto viene scoperto gradualmente, spesso animando un clip-path o una maschera.

Un'immagine hero che si scopre da sinistra a destra.

Enter / Exit

L'animazione che un elemento esegue quando viene aggiunto o rimosso dallo schermo.

Gli item di una lista che entrano ed escono al filtro.

Sequenze e tempi

Coordinare più elementi o momenti.

Keyframes

Punti definiti di un'animazione (0%, 50%, 100%) tra cui il browser riempie gli spazi.

Un logo che rimbalza tra più pose definite.

Interpolation / Tween

Generare tutti i fotogrammi intermedi tra un valore iniziale e finale, così il movimento è continuo.

Una barra di avanzamento che scorre fluida fino al target.

Stagger

Animare più elementi uno dopo l’altro con un piccolo ritardo tra ciascuno, creando una cascata.

Le voci di un menu che appaiono una dopo l'altra.

Orchestration

Temporizzare di proposito più animazioni perché sembrino un unico movimento coordinato.

Hero, titolo e CTA che entrano in sequenza coordinata.

Delay

Il tempo prima che un'animazione inizi.

Un suggerimento che compare dopo mezzo secondo di attesa.

Duration

Quanto dura un'animazione.

Un accordion lento e morbido invece che istantaneo.

Fill mode

Se un elemento mantiene gli stili del primo o dell'ultimo fotogramma prima o dopo l'animazione (es. forwards).

Un elemento che resta nella posizione finale a fine animazione.

Stepped animation

Un’animazione divisa in passi discreti, come un timer che conta alla rovescia.

Un conto alla rovescia che salta secondo per secondo.

Movimento e trasformazioni

Cambiare posizione, dimensione o angolo di un elemento.

Translate

Spostare un elemento lungo l'asse X o Y.

Un pulsante che si sposta per fare spazio a un menu.

Scale

Rendere un elemento più grande o più piccolo.

Una thumbnail che si ingrandisce al passaggio del mouse.

Rotate

Far ruotare un elemento attorno a un punto.

L'icona di un menu che ruota in una X.

Skew

Inclinare un elemento lungo l'asse X o Y, deformandolo dalla sua forma rettangolare.

Un banner promo inclinato per dare dinamismo.

3D tilt / Flip

Ruotare nello spazio 3D (rotateX / rotateY) per aggiungere profondità.

Una carta che si gira per mostrare il retro.

Perspective

Quanto forte appare l’effetto 3D: un valore basso esagera la profondità, come se chi guarda fosse più vicino.

Una cover che si inclina in 3D seguendo il cursore.

Transform origin

Il punto di ancoraggio da cui uno scale o una rotazione cresce o gira.

Un tooltip che cresce dall'angolo invece che dal centro.

Origin-aware animation

L'elemento si anima a partire dal suo trigger, come un popover che cresce dal pulsante che l'ha aperto invece che dal proprio centro.

Un popover che esplode dal pulsante che l'ha aperto.

Transizioni tra stati

Collegare uno stato, una vista o un elemento a un altro.

Crossfade

Un elemento sfuma in uscita mentre un altro sfuma in entrata, nello stesso punto.

Due foto di una gallery che si dissolvono l'una nell'altra.

Continuity transition

Un cambiamento che tiene orientato l'utente collegando visivamente il prima e il dopo, ad esempio ingrandendo e rimpicciolendo lo stesso rettangolo.

Una card che si espande mantenendo la stessa forma.

Morph

Una forma si trasforma dolcemente in un'altra, es. la Dynamic Island.

La Dynamic Island che si allarga per una chiamata.

Shared element transition

Un elemento viaggia e si trasforma da una posizione a un'altra, come una miniatura che si espande in una scheda.

Una thumbnail che diventa la copertina a tutto schermo.

Layout animation

Quando dimensione o posizione di un elemento cambiano, si anima verso il nuovo punto invece di saltarci di scatto.

Le card di una griglia che si riposizionano al riordino.

Accordion / Collapse

Una sezione espande e collassa dolcemente la sua altezza per mostrare o nascondere contenuto.

Una FAQ che apre e chiude la risposta.

Direction-aware transition

Il contenuto scivola in un verso andando avanti e nel verso opposto tornando indietro, dando un senso di direzione alla navigazione.

Le slide che vanno avanti o indietro secondo il tasto.

Scroll

Movimento legato allo scroll o alla navigazione tra viste.

Scroll reveal

Gli elementi sfumano o scivolano al loro posto quando entrano nel viewport.

Le sezioni che compaiono mentre scorri la landing.

Scroll-driven animation

Un'animazione il cui avanzamento è legato direttamente alla posizione di scroll.

Una barra di lettura che si riempie con lo scroll.

Parallax

Sfondo e primo piano si muovono a velocità diverse durante lo scroll, creando profondità.

Lo sfondo che scorre più lento del primo piano.

Page transition

Un'animazione che si esegue navigando da una pagina o rotta a un'altra.

Una dissolvenza tra una pagina e l'altra.

View transition

Il browser fa il morphing tra due stati o pagine, collegando gli elementi condivisi.

Un articolo che si apre dalla sua anteprima nel feed.

Feedback e interazione

Rispondere alle azioni dell'utente. (Passa il mouse sulle preview.)

Hover effect

Cambiamento visivo quando il cursore passa sopra un elemento.

Un pulsante che si illumina al passaggio del mouse.

Press / Tap feedback

Un leggero rimpicciolimento al click, così l’elemento sembra fisico.

Un tasto che si schiaccia leggermente al click.

Hold to confirm

Un effetto di progresso che si riempie mentre l'utente tiene premuto un pulsante.

Un pulsante 'Elimina' da tenere premuto per confermare.

Drag

Spostare un elemento afferrandolo, spesso con inerzia al rilascio.

Una foto che trascini per spostarla sul canvas.

Drag to reorder

Trascinare elementi in una lista per riordinarli, mentre gli altri si spostano per fare spazio.

Una to-do list che riordini trascinando le voci.

Swipe to dismiss

Trascinare un elemento fuori schermo per chiuderlo, come un drawer o un toast.

Una notifica che scarti scorrendo via col dito.

Rubber-banding

Resistenza e ritorno elastico quando trascini oltre un limite (la sensazione di overscroll di iOS).

La lista che rimbalza quando scrolli oltre il fondo.

Shake / Wiggle

Un rapido tremolio da lato a lato che segnala un errore o un input rifiutato.

Un campo password che trema se la password è errata.

Ripple

Un cerchio che si espande dal punto del tocco, confermando la pressione.

L'onda che parte dal punto in cui tocchi un bottone.

Easing

Come la velocità cambia nel corso di un'animazione.

Easing

Il ritmo con cui un'animazione accelera o rallenta.

Un menu che parte deciso e rallenta dolcemente alla fine.

Ease-out

Inizia veloce, finisce lenta. Il default per la maggior parte della UI e per tutto ciò che risponde all'utente.

Un pannello che entra veloce e si posa con calma.

Ease-in

Inizia lenta, finisce veloce. Di solito evitata: può sembrare fiacca.

Un elemento che esce di scena accelerando.

Ease-in-out

Lenta, veloce, lenta. Buona per elementi già a schermo che si spostano da A a B.

Un box che si sposta morbido da un lato all'altro.

Linear

Velocità costante. Da evitare nella UI; riservala a spinner o marquee.

Uno spinner che gira a velocità costante.

Cubic-bezier

Una curva di easing personalizzata che definisci per un controllo preciso.

Una transizione su misura con un piccolo overshoot.

Asymmetric easing

Una curva che accelera e decelera a ritmi diversi. Sembra più viva di una simmetrica.

Un movimento che parte lento e frena di colpo.

Animazioni a molla

Movimento basato sulla fisica, alternativo all’easing a durata fissa.

Spring

Movimento guidato dalla fisica (tensione, massa, smorzamento) anziché da una durata fissa.

Un pannello che entra con un rimbalzo naturale.

Stiffness / Tension

Quanto forte la molla tira verso il bersaglio. Più alta, più scattante.

Un menu scattante che raggiunge subito la posizione.

Damping

Quanto rapidamente una molla si assesta. Smorzamento basso significa più rimbalzo e oscillazione.

Un toggle che oscilla un attimo prima di fermarsi.

Mass

Quanto pesante sembra l’elemento animato. Più massa lo rende più lento e pigro.

Un elemento pesante che si muove lento e deciso.

Bounce

Una molla che supera il bersaglio e si assesta, aggiungendo giocosità.

Un'emoji che atterra rimbalzando sullo schermo.

Perceptual duration

Quanto una molla sembra finita, anche se continua a micro-assestarsi sotto.

Una molla che sembra ferma ma si assesta ancora.

Momentum

Movimento che porta con sé velocità, specie dopo un drag o un’interruzione.

Una lista che continua a scorrere dopo lo swipe.

Velocity

Quanto velocemente e in che direzione si muove un elemento. Una molla la trasporta nell’animazione successiva quando viene interrotta.

Un elemento lanciato che mantiene la sua spinta.

Interruptible animation

Un'animazione che può essere reindirizzata dolcemente a metà invece di finire prima.

Un menu che cambia rotta se lo richiudi a metà.

Loop e movimento ambientale

Animazioni che girano da sole.

Marquee

Testo o contenuto che scorre in modo continuo in loop.

Una fascia di loghi clienti che scorre in continuo.

Loop

Un'animazione che si ripete, un numero definito di volte o all'infinito.

Un'icona di caricamento che ruota all'infinito.

Alternate (yoyo)

Un loop che va avanti e poi indietro a ogni iterazione, invece di tornare di scatto all’inizio.

Una freccia 'scorri giù' che va su e giù.

Orbit

Un elemento che gira attorno a un altro lungo un percorso continuo.

Dei pallini che orbitano attorno a un loader.

Pulse

Un delicato cambiamento ripetuto di scala o opacità per attirare l’attenzione.

Un pallino di notifica che pulsa per attirare l'occhio.

Float

Una lenta e continua oscillazione su e giù che fa sembrare vivo e leggero un elemento statico.

Un'illustrazione che fluttua leggera nell'hero.

Idle animation

Movimento sottile che si esegue mentre un elemento è solo lì, in attesa di interazione.

Un personaggio che respira mentre aspetta un input.

Rifiniture ed effetti

I piccoli tocchi che separano il buono dall’eccellente.

Blur

Un filtro di sfocatura usato per ammorbidire un elemento o mascherare piccole imperfezioni.

Lo sfondo che si sfoca quando apri una modale.

Clip-path

Ritagliare un elemento in una forma, usato per reveal, maschere e slider prima/dopo.

Un'immagine ritagliata a rombo che cambia forma.

Mask

Nascondere o rivelare parti di un elemento con una forma o un gradiente — come clip-path, ma con bordi morbidi e sfumabili.

Un testo svelato da un riflesso che ci passa sopra.

Before / after slider

Un divisore trascinabile che fa la transizione tra due immagini sovrapposte per confrontarle.

Un confronto prima/dopo di una foto ritoccata.

Line drawing

Un tracciato SVG che si disegna da solo, come una penna invisibile che lo ricalca.

Una firma o un’icona che si disegna da sola.

Text morph

Testo che si anima carattere per carattere quando cambia, attirando l’attenzione sul nuovo valore.

Un prezzo che cambia animando le cifre.

Skeleton / Shimmer

Un segnaposto con un riflesso in movimento mostrato mentre il contenuto carica.

I segnaposto luccicanti mentre carica il feed.

Number ticker

Cifre che ruotano o salgono fino a un valore.

Un contatore di iscritti che sale fino al totale.

Tabular numbers

Cifre a larghezza fissa così i numeri non ballano mentre cambiano. Essenziale per ticker, timer e contatori.

Un timer che non balla mentre i numeri cambiano.

Typewriter

Testo che appare un carattere alla volta, come se venisse digitato.

Un titolo che si scrive carattere per carattere.

Prestazioni

Ciò che tiene il movimento fluido invece che a scatti.

Frame rate (FPS)

Fotogrammi disegnati al secondo. 60fps è la base per un movimento fluido; 120fps sui display più recenti.

Un movimento fluido a 60fps senza scatti.

Jank

Scatto visibile quando il browser perde fotogrammi perché non riesce a stare dietro all’animazione.

Lo scatto da evitare quando l'animazione arranca.

Dropped frame

Un fotogramma che il browser non è riuscito a disegnare in tempo, causando un piccolo singhiozzo nel movimento.

Il singhiozzo quando il browser salta un frame.

Compositing

Lasciare che la GPU sposti o sfumi un elemento sul suo livello senza rifare layout o paint.

Spostare un elemento via GPU senza ridisegnare.

will-change

Un suggerimento CSS che un elemento sta per animarsi, così il browser può promuoverlo al suo livello in anticipo.

Avvisare il browser che un menu sta per aprirsi.

Layout thrashing

Animare proprietà come width, height, top o left che costringono il browser a ricalcolare il layout ogni fotogramma, causando jank.

L'errore di animare width invece di transform.

Principi da conoscere

Concetti che guidano quando e come animare.

Purposeful animation

Il movimento deve servire una funzione — orientare, dare feedback, mostrare relazioni — non solo decorare.

Un'animazione che guida l'occhio, non solo decora.

Anticipation

Un piccolo caricamento nella direzione opposta prima di un movimento, anticipando ciò che sta per accadere.

Un piccolo caricamento prima che un elemento parta.

Follow-through

Parti di un elemento continuano a muoversi e si assestano leggermente dopo che il movimento principale si ferma, aggiungendo peso.

Una coda che continua a muoversi dopo lo stop.

Squash & stretch

Deformare un elemento mentre si muove per trasmettere peso, velocità e flessibilità.

Una palla che si schiaccia quando rimbalza.

Perceived performance

L'animazione giusta fa sembrare un'interfaccia più veloce, anche quando non lo è.

Uno skeleton che fa sembrare il caricamento più rapido.

Frequency of use

Più spesso un utente vede un'animazione, più dovrebbe essere breve e sottile.

Un'animazione breve perché la vedi mille volte al giorno.

Spatial consistency

Animare in modo che un elemento mantenga identità e posizione tra gli stati, così l'utente non perde mai di vista dove sono le cose.

Un menu che torna sempre da dove è uscito.

Hardware acceleration

Animare transform e opacity lascia che la GPU mantenga il movimento fluido.

Animare transform e opacity per restare fluidi.

Reduced motion

Rispettare l'impostazione prefers-reduced-motion dell'utente attenuando o rimuovendo il movimento.

Disattivare il movimento per chi soffre di motion sickness.