Regola durata, ritardo ed easing con gli slider, guarda la curva cubic-bezier disegnata, confronta le transition con @keyframes e copia 20 micro-interazioni al passaggio del mouse che rispettano il reduced motion.
Una transition CSS anima in modo fluido una proprietà quando il suo valore cambia, per esempio al passaggio del mouse: transition: transform 200ms ease-out. Ha bisogno di uno stato iniziale e uno finale e parte una volta per ogni cambiamento. Le animazioni @keyframes definiscono i propri passaggi, possono ripetersi in loop e partono senza alcun cambio di stato. Anima transform e opacity per i risultati più fluidi.
transition, parte per parte
Il playground anima un elemento reale tra due stati con la proprietà, la durata, il ritardo e l'easing che scegli, e disegna l'easing come una curva così vedi perché ease-out sembra scattante ed ease-in sembra lento. Più in basso trovi venti effetti di hover e focus che puoi modificare dal vivo e incollare in qualsiasi sito.
Una transition reagisce a un cambio di valore, come una classe aggiunta o l'inizio di un hover, e va solo dal valore vecchio a quello nuovo. Un'animation usa @keyframes, può avere molti passaggi, può ripetersi o alternarsi, e parte appena viene applicata. Usa le transition per i cambi di stato e i keyframes per loader e richiami d'attenzione.
Cause comuni: la proprietà non è animabile (display non lo era, fino ad allow-discrete), il valore iniziale è auto (height: auto non si può interpolare senza funzionalità più recenti), l'elemento è appena stato inserito quindi non c'è uno stile precedente, oppure la transition è dichiarata solo sullo stato hover e quindi torna indietro di scatto quando il mouse esce.
transform e opacity di solito possono essere gestite dal compositor senza ricalcolare il layout o ridisegnare, quindi restano fluide. Animare width, height, top, left o margin forza il layout a ogni frame, e box-shadow o filter provocano ridisegni, che possono scattare sui telefoni più lenti.
Descrive la curva di easing con due punti di controllo, cubic-bezier(x1, y1, x2, y2). I valori x sono il tempo e devono restare tra 0 e 1; i valori y sono l'avanzamento e possono uscire da quell'intervallo, creando un superamento o un piccolo rimbalzo all'indietro.
Usa la media query @media (prefers-reduced-motion: reduce) per accorciare o eliminare il movimento. Un approccio semplice è mantenere i cambi di colore e opacità ma togliere i transform, oppure impostare transition-duration e animation-duration a un valore minimo dentro quella query.
Quando usare l'una o l'altra
Lavoro di rendering per frame (regola generale, varia secondo il browser)
Mantiene i cambi di stato ma elimina lo spostamento. Mettila verso la fine del foglio di stile.
Un miglioramento per i browser che supportano allow-discrete e @starting-style. Gli altri mostrano e nascondono all'istante.
Passa il mouse o porta il focus su ogni risultato per vederlo in azione. Ogni snippet termina con una regola per il reduced motion.
Solleva una card e rende più profonda la sua ombra.
Un leggero ingrandimento all'hover e una pressione al clic.
La linea cresce da sinistra usando la dimensione dello sfondo.
Colore di sfondo e del testo si scambiano insieme.
L'icona si sposta mentre l'etichetta resta ferma.
Un più diventa una croce.
L'offset del contorno si anima per chi usa la tastiera.
L'immagine si ingrandisce ma la cornice la ritaglia.
La didascalia sale dal bordo inferiore.
Un'ombra colorata appare in dissolvenza.
Pochi gradi di rotazione fanno sembrare uno sticker appoggiato.
Il colore del bordo passa dal grigio al blu del brand.
Passare su un elemento attenua quelli accanto.
Una banda di luce attraversa l'elemento all'hover.
Una checkbox con lo stile di uno switch e un cursore scorrevole.
L'indicatore ruota quando un elemento details si apre.
Un punto di stato in loop costruito con @keyframes.
Il timing lineare mantiene costante la rotazione.
fill-mode both lo tiene nascosto durante il ritardo.
Una breve scossa orizzontale che qui parte una volta all'hover.
Curva di easing cubic-bezier({values})
Riproduci avanti
Riproduci indietro
Il tuo dispositivo chiede movimento ridotto, quindi l'anteprima salta invece di muoversi.
Proprietà da animare
Durata: {n}ms
Ritardo: {n}ms
Preset di easing
Copia CSS
Inizia gratis · Nessuna carta di credito richiesta