La differenza tra un'interfaccia che sembra economica e una che sembra considerata è solitamente un quinto di secondo. Un pulsante che si aggancia al suo colore al passaggio del mouse nell'istante in cui il puntatore lo tocca si legge come brusco; lo stesso pulsante che si adatta a quel colore per oltre duecento millisecondi si legge come finito. Quell'allentamento è una transizione CSS, e per qualcosa di così piccolo è notevole la frequenza con cui l'ho visto fare male, indossare lo stato di passaggio del mouse invece dello stato base, sintonizzato per tentativi ed errori su una dozzina di aggiornamenti o applicato a una proprietà che non può animarsi affatto.
Una transizione è il browser's modo di animare il cambiamento tra due valori di una proprietà nel tempo, piuttosto che passare istantaneamente È il cavallo di battaglia dietro gli effetti di hover, stati di messa a fuoco, pannelli in espansione e classi commutate, ed è quasi sempre il primo bit di movimento che chiunque aggiunge a un progetto Ma la stenografia stipa quattro valori in una riga in un ordine fisso, la funzione di temporizzazione è la parte che determina come il movimento si sente, e c'è una ben nota gente di scogliera cadere quando cercano di sbiadire qualcosa in da display: none. Costruire la transizione in cui puoi vederla giocare salva tutto questo.
la Generatore di transizione CSS consente di scegliere una proprietà, impostare la durata e il ritardo in millisecondi e scegliere una funzione di temporizzazione dalle parole chiave CSS e un insieme di curve cubic-bezier curate È possibile impilare diverse transizioni in una abbreviazione e un pulsante di attivazione riproduce il movimento su un elemento di anteprima live in modo da sentire l'allentamento prima di impegnarsi in esso La dichiarazione esatta si trova in una casella pronta per la copia qui sotto.
tl; dr: Una transizione CSS anima la variazione tra due valori di una proprietà su una durata impostata Appartiene allo stato base, non allo stato hover, quindi l'elemento si attenua in entrambe le direzioni L'ordine shorthand è proprietà, durata, funzione timing, ritardo Non è possibile effettuare la transizione
display, perché non ha valori intermedi, e dovresti preferire l'animazionetransformeopacityper prestazioni fluide Questo generatore espone ogni parte con un'anteprima live hover, supporta più livelli ed emette CSS puliti Funziona interamente nel browser senza registrazione.
Che problema risolve un generatore di transizione CSS?
La parte difficile di una transizione non è la sintassi; è che non puoi giudicare il movimento leggendolo. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) descrive una specifica facilità di rimbalzo, ma l'unico modo per sapere se quel rimbalzo sembra giusto per il tuo pulsante è guardarlo accadere E guardarlo accadere nel tuo progetto significa scrivere la regola, impostare lo stato di hover, salvare e spostare il mouse sull'elemento, quindi regolare un numero e rifare tutto Quel ciclo è abbastanza lento che la maggior parte delle persone si accontenta della prima cosa che funziona piuttosto che della cosa che si sente meglio.
Un generatore trasforma quel ciclo in un singolo clic Impostare una durata e premere il trigger, e l'elemento di anteprima gioca la transizione di fronte a voi Cambiare la funzione di temporizzazione e premerlo di nuovo, e si sente la differenza tra una diapositiva lineare e una facilità-out stabilizzarsi immediatamente Dopo pochi giri si sviluppa un senso per quello che duecento millisecondi si sente come contro cinquecento, che è l'intuizione che separa il movimento che aiuta dal movimento che si mette in mezzo Quando si è soddisfatti, il CSS funzionante è già scritto, quindi non c'è nulla da trascrivere.
Qui si applica lo stesso argomento di affidabilità di qualsiasi costruttore CSS visivo: non è possibile produrre un modello non valido transition valore trascinando i cursori e scegliendo tra i menu, in modo che l'output sia sempre sicuro da incollare Questo è il motivo per cui tengo questo tipo di strumento vicino, lo stesso istinto dietro il raggiungimento del Generatore di trasformate CSS quando ho bisogno di una trasformazione piuttosto che contare i gradi nella mia testa.
Dove va la transizione, sullo stato base o sullo stato hover?
Questo è l'errore che vedo di più, e vale la pena dirlo chiaramente perché la correzione è così semplice. La transizione appartiene allo stato base dell'elemento's, non al suo :hover regola. Quando la transizione viene dichiarata nello stato base, il browser anima la proprietà in entrambe le direzioni: si attenua al cambio di passaggio quando arriva il puntatore e si attenua quando il puntatore se ne va. Quella simmetria è ciò che fa sembrare completa un'interazione.
Metti la transizione solo su :hover e si ottiene un effetto sbilenco La proprietà si anima senza problemi durante l'ingresso, perché la transizione è presente mentre l'elemento è sospeso, ma nel momento in cui il puntatore se ne va, il :hover la regola non si applica più, la transizione va con esso e la proprietà scatta indietro istantaneamente Il risultato è un pulsante che si facilita con grazia e poi si ridimensiona, che sembra peggio di nessuna animazione. L'output del generatore' è scritto per passare allo stato base e la guida è inserita nello strumento esattamente per questo motivo. Dichiaralo una volta, sull'elemento stesso, e lascia che i cambiamenti di stato lo attivino.
Qual è l'ordine corretto della stenografia di transizione?
la transition shorthand racchiude fino a quattro valori in una riga e l'ordine è fissato dalla specifica: proprietà, durata, funzione temporale, ritardo. COSÌ transition: opacity 300ms ease-in-out 100ms indica la proprietà di opacità, animata in trecento millisecondi, utilizzando una curva di facilità in uscita, dopo un ritardo di cento millisecondi Sbagliare l'ordine e il browser o ignora la dichiarazione o la legge come qualcosa che non intendevi.
L'unica regola che cattura le persone sono i due valori temporali Sia la durata che il ritardo sono tempi, e CSS li distingue puramente per posizione: il primo valore temporale è sempre la durata, e il secondo è sempre il ritardo Se scrivi un solo valore temporale, viene letto come la durata, e il ritardo rimane al suo default pari a zero Questo è il motivo per cui una transizione che sembra iniziare troppo presto è spesso un caso di ritardo scritto per primo accidentalmente Il generatore elude l'intero problema costruendo la scorciatoia per te nell'ordine corretto, e omette del tutto il ritardo quando è zero, quindi non spedisci mai un trailing 0ms che non fa nulla Ecco l'anatomia in un tavolo.
| Parte | esempio | Cosa controlla |
|---|---|---|
| proprietà | opacity |
Quale proprietà anima, o all per ogni animabile |
| durata | 300ms |
Quanto tempo richiede l'animazione; il primo valore temporale |
| funzione temporale | ease-in-out |
La curva di accelerazione del moto |
| ritardo | 100ms |
Quanto tempo aspettare prima di iniziare; il secondo valore temporale |
Perché il mio display: nessuna transizione non si animerà?
Questa è la scogliera, e quasi tutti ne escono almeno una volta Vuoi che un elemento svanisca, così passi display a none a block e impostare opacity, e l'elemento appare semplicemente senza dissolvenza Il motivo è fondamentale: display non è una proprietà animabile Non c'è un punto a metà strada tra none e block, nessun valore su cui il browser può interpolare al cinquanta per cento, quindi non c'è nulla da intrecciare Il cambiamento avviene istantaneamente e qualsiasi animazione di opacità che hai stratificato in alto viene interrotta perché l'elemento non è stato renderizzato all'inizio.
La soluzione classica è animare opacity e visibility insieme e partire display fuori di esso. visibility può effettuare la transizione perché, sebbene sia anche una proprietà discreta, abbinarla a una durata consente al browser di mantenere visibile l'elemento fino al completamento della dissolvenza dell'opacità all'uscita. La correzione moderna è transition-behavior: allow-discreteuna funzionalità più recente che ti consente di animare proprietà discrete come display agli estremi di una transizione, così puoi davvero svanire display: none nei browser che lo supportano In ogni caso, la lezione è la stessa: controlla che la proprietà che stai effettuando la transizione abbia valori intermedi prima di passare un'ora a chiederti perché non si muove nulla Questo è il tipo di gotcha che un'anteprima live emerge in pochi secondi, che è una parte importante dell'argomento per costruire il movimento dove puoi guardarlo.
Cos'è una funzione di temporizzazione, e perché ha così tanta importanza?
La funzione di temporizzazione è la parte di una transizione che decide come si sente il movimento, e fa molto più lavoro della durata Due transizioni della stessa lunghezza possono sembrare completamente diverse a seconda della loro curva. UN linear transizione si muove a velocità costante e si sente meccanico, come una parte della macchina Un ease-out la transizione inizia velocemente e rallenta quando arriva, il che sembra naturale perché imita il modo in cui gli oggetti fisici decelerano ed è il giusto valore predefinito per la maggior parte dei movimenti dell'interfaccia. ease-in fa il contrario ed è meglio per le cose che escono dallo schermo.
Sotto, tutte queste sono curve cubic-bezier Le parole chiave ease, ease-in, ease-out e ease-in-out sono solo nomi amichevoli per specifici cubic-bezier(x1, y1, x2, y2) valori, dove i due punti di controllo modellano l'accelerazione Ciò che rende cubic-bezier potente è che un punto di controllo con un y il valore sopra uno o sotto zero spinge l'animazione oltre il suo endpoint e indietro, che è il modo in cui si costruisce un overshoot o un rimbalzo Il generatore include una curva standard del Materiale per il movimento pulito dell'interfaccia e una curva Indietro che supera per una sensazione elastica e giocosa, più un steps() funzione per il movimento che salta in fotogrammi discreti anziché planare, che è il modo in cui si anima uno sprite o un contatore ticchettio Scegliere una curva e premere il grilletto è il modo più veloce per creare un'atmosfera per quello che ognuno fa.
Quando devo usare più livelli di transizione?
Una singola transizione anima una proprietà, ma le interazioni reali spesso cambiano diverse contemporaneamente Un pulsante che si solleva al passaggio del mouse potrebbe spostare il colore dello sfondo, spingere la sua trasformazione e approfondire la sua ombra, e ognuno di questi potrebbe volere il proprio tempismo. Il transition la proprietà gestisce questo con un elenco separato da virgole, in cui ogni voce è una transizione completa con la propria proprietà, durata, funzione di temporizzazione e ritardo.
Il generatore lo supporta direttamente: aggiungi un livello per ogni proprietà, sintonizza ciascuno in modo indipendente e lo strumento li unisce in un'unica abbreviazione transition: background-color 200ms ease, transform 200ms ease-out. Il motivo per dare alle proprietà transizioni separate piuttosto che utilizzare all è controllo e prestazioni. transition: all è conveniente, ma anima ogni proprietà che cambia, comprese quelle che non intendevi, e costringe il browser a guardare tutto per le modifiche Nominare le proprietà specifiche è sia più prevedibile che più economico Il preset di rivelazione lenta nello strumento mostra una transizione a due livelli, un'opacità che sbiadisce e uno spostamento di una trasformazione insieme a un ritardo condiviso, che è la ricetta standard per un elemento che si facilita nella visualizzazione Se il lato di trasformazione di quell'accoppiamento è quello che stai sintonizzando, il Generatore di trasformate CSS è lo strumento complementare e i due vengono quasi sempre usati insieme.
Quali proprietà devo animare per ottenere prestazioni fluide?
Non tutte le proprietà sono ugualmente economiche da animare, e la scelta ha un effetto diretto sul fatto che la tua transizione si svolga a sessanta fotogrammi al secondo lisci o balbetta Le due proprietà da preferire sono transform e opacity. Entrambi possono essere consegnati alla GPU e compositi senza ricalcolare il layout della pagina, quindi animarli rimane fluido anche su hardware modesto. Questo è il motivo per cui una scheda che scorre con transform: translateX sembra burroso mentre la stessa carta è animata da left sembra ruvido.
Le proprietà per evitare di animare sono quelle che attivano il layout: width, height, top, left, margin e padding. Cambiare una qualsiasi di queste costringe il browser a ricalcolare la posizione e le dimensioni dell'elemento e di tutto ciò che ne è interessato, su ogni singolo fotogramma dell'animazione, che è costoso ed è la causa più comune di movimento stravagante Se ti ritrovi a voler animare una larghezza, di solito vale la pena chiederti se a transform: scaleX produrrebbe un effetto simile in modo più economico Il generatore ti consente di scegliere qualsiasi proprietà in modo da non essere mai bloccato, ma le proprietà che elenca messo transform e opacity vicino alla cima perché quelli sono quelli che si dovrebbe raggiungere per primi Il caso più ampio per la costruzione di un insieme considerato di strumenti come questo è nel Toolkit per sviluppatori web pezzo, e le abitudini del flusso di lavoro che ne stanno dietro sono nel Strumenti di produttività per sviluppatori guida.
Come fa il generatore a mantenere onesta l'anteprima?
Ogni costruttore visivo affronta lo stesso rischio: l'anteprima e il codice esportato si allontanano finché lo strumento non ti insegna un valore che non si riprodurrà Questo generatore applica l'esatto transition valorizza l'output all'elemento di anteprima e lo attiva con un cambiamento di stato reale, quindi il movimento che vedi è il movimento che produrrà il CSS copiato Non esiste un percorso di animazione separato che potrebbe non essere d'accordo.
Poiché una transizione viene eseguita solo quando una proprietà cambia, l'anteprima ha bisogno di uno stato tra cui passare, che è ciò che fa il pulsante di attivazione: capovolge l'elemento tra due serie di valori in modo che la transizione si attivi e tu possa guardarla. Questo rispecchia il funzionamento di una transizione in natura, dove un passaggio del mouse, un focus o una classe attivata è ciò che lo attiva. Anche l'output rimane minimo, eliminando il ritardo quando è zero ed elencando solo i livelli aggiunti, la stessa disciplina di emettere solo dichiarazioni significative che attraversano il generatore gradiente E il generatore box-shadow.
Quali browser supportano le transizioni CSS?
Le transizioni CSS sono supportate in ogni browser attuale e lo sono da ben oltre un decennio Il transition la proprietà e tutti i suoi longhand sono universali e non fissati, quindi l'output di questo generatore funziona in Chrome, Firefox, Safari e Edge senza prefissi o fallback del fornitore Il più recente transition-behavior: allow-discrete capacità di animare proprietà discrete come display è più recente e ha un supporto più ristretto, quindi tratta quella tecnica specifica come un miglioramento progressivo e mantieni l'accoppiamento opacità-e-visibilità come il tuo fallback Per le regole autorevoli, la specifica CSS Transitions Module Level 1 del W3C è la fonte primaria, e vale la pena leggerla una volta che il generatore ti ha dato un'idea di come si adattano i pezzi.
Se stai assemblando un set più ampio di strumenti CSS visivi, il generatore di trasformazione e il Generatore di filtri CSS accoppia naturalmente con questo, poiché una transizione è ciò che smussa le trasformate e i filtri che costruisci con loro Tutto qui funziona lato client e il CSS che copi è tuo da usare senza runtime, senza passaggio di compilazione e senza dipendenza.
Domande frequenti
Che cosa è un generatore di transizione CSS?
Un generatore di transizione CSS è uno strumento visivo che costruisce una transizione CSS dalle impostazioni scelte Scegli una proprietà, durata, funzione di temporizzazione e ritardo e restituisce la scorciatoia di transizione con un'anteprima live che puoi attivare per guardare l'allentamento.
Dove metto la transizione, sullo stato base o sullo stato hover?
Mettilo sullo stato base Una transizione dichiarata sulla regola base anima la proprietà in entrambe le direzioni, nel cambio di hover e torna fuori di esso Dichiarandolo solo al passaggio del mouse si anima il cambiamento ma lo lascia scattare indietro istantaneamente quando il puntatore se ne va.
Qual è l'ordine della stenografia di transizione?
L'ordine è proprietà, durata, temporizzazione-funzione, ritardo, ad esempio transizione: opacità 300 ms ease-in-out 100 ms Il primo valore temporale è sempre la durata e il secondo è sempre il ritardo, quindi un singolo valore temporale viene letto come la durata.
Perché il mio display: nessuno da visualizzare: la transizione del blocco non si animerà?
Perché il display non è una proprietà animabile Non c'è un valore intermedio tra nessuno e blocco, quindi il browser non ha nulla da intrecciare Opacità di transizione e visibilità insieme invece, o utilizzare transizione-comportamento: consentire-discreto nei browser più recenti per svanire dal display: nessuno.
Posso effettuare la transizione di più di una proprietà contemporaneamente?
Sì. separa ogni transizione con una virgola, ad esempio transizione: opacità 300 ms facilità, trasformazione 200 ms facilità-out Questo generatore costruisce tale elenco per voi come si aggiungono livelli, dando ogni proprietà la propria durata, funzione di temporizzazione e ritardo.
Che cosa è una funzione di temporizzazione cubic-bezier?
Una funzione di temporizzazione cubic-bezier definisce una curva di accelerazione personalizzata da due punti di controllo, scritta cubic-bezier (x1, y1, x2, y2) Le parole chiave easy-in, easy-in, easy-out sono scorciatoie per curve specifiche, e i punti di controllo sopra 1 o sotto 0 creano un superamento, che è il modo in cui viene costruito un rimbalzo.
Quali proprietà devo animare per ottenere prestazioni fluide?
Preferiscono la trasformazione e l'opacità Sono compositi sulla GPU e non attivano il layout, quindi si animano a 60 fps L'animazione di larghezza, altezza, cima, sinistra o margine costringe il browser a ricalcolare il layout su ogni fotogramma, che è la causa più comune di transizioni balbettanti.
Il CSS di transizione generato è gratuito e sicuro da usare?
Sì. Lo strumento è completamente gratuito senza limiti di iscrizione o di utilizzo ed emette CSS standard e non prefissati supportati in ogni browser moderno. Tutta l'elaborazione avviene nel tuo browser, quindi non viene caricato nulla e lo strumento funziona offline una volta caricato.
