Come utilizzare le transizioni e le animazioni CSS3 per evidenziare le modifiche dell'interfaccia utente

Designer e artisti hanno una lunga storia di sperimentazioni con il movimento, effetti e diversi tipi di illusioni con l'obiettivo di aggiungere un ulteriore livello al loro lavoro. Il movimento op art ha iniziato a utilizzare le illusioni ottiche negli anni '60 per dare l'impressione del movimento.

Da allora sono sorti nuovi e più recenti approcci, come l'arte cinetica recentemente popolare che estende la prospettiva dello spettatore usando il movimento multidimensionale. Il movimento apparve anche in informatica con l'invenzione del primo cursore lampeggiante nel 1967.

Negli elementi di sviluppo front-end, gli elementi DOM venivano solitamente animati da JavaScript prima del rilascio del CSS3, ed è un metodo che funziona ancora, ma il le nuove proprietà introdotte da CSS3 ci consentono di migliorare i nostri progetti con diversi effetti e movimento in un modo più intuitivo.

Le due principali tecniche offerte da CSS3 sono le transizioni e le animazioni. In questo post daremo un'occhiata a ciò che sono, qual è la differenza tra loro e come è possibile utilizzarli.

transizioni

Le transizioni e le animazioni sono entrambe abituate visualizza i cambiamenti nello stato di un elemento HTML di modifica di una o più delle sue proprietà CSS.

La forma più semplice di visualizzazione del cambiamento di stato sta alterando il colore di un pulsante o di un link quando è al passaggio del mouse. Quando succede, l'elemento assume uno stile leggermente diverso, che di solito viene notato dal visualizzatore come se qualcosa si fosse spostato sullo schermo.

La modifica delle proprietà CSS di un collegamento su hover (o focus o clic) è la più antica e più semplice forma di transizione, ed esisteva molto prima dell'era CSS3.

 a color: orange;  a: hover color: red;  a: focus color: blue;  a: visited color: green; 

Le transizioni vengono utilizzate quando un elemento HTML cambia da uno stato predefinito a un altro. I CSS3 hanno introdotto nuove proprietà che consentono visualizzazioni più sofisticate di prima, come le funzioni di cronometraggio o il controllo della durata.

Daremo un'occhiata alle nuove proprietà CSS nella prossima sezione, dopo aver compreso come differiscono le animazioni. Per ora, vediamo le cose più importanti che devi sapere sulle transizioni.

1. Hanno sempre un inizio e uno stato finale.
2. Gli stati tra il punto iniziale e quello finale sono definiti implicitamente dal browser, non possiamo modificarlo con i CSS.
3. Richiedono innesco esplicito, come aggiungere un nuovo pseudoclass con CSS o una nuova classe con jQuery.

Puoi vedere un bellissimo esempio di transizioni CSS3 elegantemente utilizzate di seguito, in cui l'autore rivela informazioni nascoste in un modo non intrusivo, ma continua a focalizzare l'attenzione degli utenti sui nuovi contenuti.

animazioni

Se vogliamo visualizzare cambiamenti di stato con movimenti più complicati, o se non abbiamo un trigger esplicito, ad es. se vogliamo iniziare l'effetto quando la pagina si carica, le animazioni sono la strada da percorrere.

Le animazioni consentono di definire un percorso più complesso impostando e configurando il nostro i fotogrammi chiave. I fotogrammi chiave sono punti intermedi nel corso dell'animazione, che ci permettono di cambiare lo stile dell'elemento animato tutte le volte che vogliamo.

Sebbene i CSS3 offrano ottimi modi per creare animazioni sofisticate, di solito è più difficile crearli rispetto alle transizioni, ecco perché ci sono molte librerie di animazione fantastiche là fuori, che possono facilitare il nostro lavoro.

Le cose più importanti che devi sapere sulle animazioni CSS3 includono:

1. non richiedono un trigger esplicito, possono avviarsi al caricamento della pagina o quando un altro evento DOM viene eseguito nel browser
2. possono essere utilizzati nei casi in cui vengono utilizzate le transizioni, ad esempio quando una nuova classe o pseudoclass viene aggiunta o rimossa (sebbene sia un caso d'uso meno frequente)
3. ci richiedono di definire alcuni fotogrammi chiave (stati intermedi)
4. possiamo specificare il numero, la frequenza e lo stile di questi keyframe

Nell'esempio qui sotto puoi vedere un simpatico menu a discesa animato. L'animazione inizia quando clicchiamo sul pulsante. Ciò si ottiene aggiungendo ulteriori classi agli elementi dell'elenco con jQuery quando si verifica l'evento click.

Queste nuove classi sono animate con specificato @keyframes regole nel file CSS. Le classi extra vengono rimosse da jQuery quando l'utente fa clic sul pulsante la volta successiva e il menu viene nuovamente nascosto.

Proprietà CSS e The @keyframes A-Rule

Per le transizioni possiamo usare il transizione proprietà abbreviata o 4 singole proprietà correlate alla transizione: transizione immobili, durata della transizione, transizione-timing-function, e transizione ritardo. La proprietà abbreviata contiene tutte le singole proprietà in una forma abbreviata.

Per le animazioni c'è il animazione proprietà di stenografia a nostre mani che si distingue per non meno di 8 singole proprietà di animazione, vale a dire Animazione-nome, Animazione di durata, animazione-timing-function, animazione ritardo, animazione-iterazione-count, animazione direzione, Animazione-fill-mode, e Animazione-play-stato.

La cosa più importante con entrambe le transizioni e le animazioni è che siamo sempre è necessario specificare le proprietà CSS che verranno modificate durante la modifica dello stato. Con le transizioni assomiglia a questo:

 .element background: orange; transizione-proprietà: sfondo; durata della transizione: 3 secondi; funzione di temporizzazione della transizione: easy-in;  .element: hover background: red; 

Abbiamo specificato il sfondo proprietà, perché questo è ciò che verrà modificato durante la transizione.

Possiamo modificare più di una proprietà CSS in una transizione, in questo caso il codice sopra verrà modificato in questo modo: transizione-proprietà: sfondo, confine;. Possiamo anche usare il transizione-proprietà: tutto;, se non vogliamo specificare ogni proprietà separatamente.

Possiamo scegliere la stenografia transizione proprietà pure. Se lo facciamo, dobbiamo sempre prestare attenzione all'ordine corretto delle proprietà interne (vedere la sintassi nei documenti).

 .element background: orange; transizione: background 3s easy-in;  .element: hover background: red; 

Se vogliamo creare un'animazione, siamo tenuti a specificare i relativi i fotogrammi chiave. Le proprietà CSS devono essere modificate in modo definito separatamente @keyframes at-regole. Ecco un esempio di come possiamo fare questo:

 .element position: relative; nome-animazione: diapositiva; durata animazione: 3 secondi; funzione di temporizzazione dell'animazione: easy-in;  @keyframes slide 0% left: 0;  50% left: 200px;  100% left: 400px; 

Nell'esempio sopra abbiamo creato un effetto scorrevole molto semplice. Abbiamo definito il Animazione-nome, quindi associato 3 fotogrammi chiave ad esso che abbiamo specificato nel @keyframes slide ... at-regole. Le percentuali si riferiscono alla durata dell'animazione, quindi il 50% si verifica a 1.5s nell'esempio.

Potremmo usare la stenografia animazione proprietà pure, o potrebbe definire i fotogrammi chiave con il più semplice da A regola nel modo seguente:

 .element position: relative; animazione: slide 3s easy-in;  @keyframes slide from left: 0;  a sinistra: 400 px; 

La creazione di animazioni più complesse è una sua forma d'arte, se sei interessato, puoi leggere due dei nostri tutorial di animazione su come creare un perimetro avanzato e come creare un effetto di rimbalzo.

Quando costruisci transizioni e animazioni, devi saperlo non tutte le proprietà CSS possono essere animate, quindi è sempre una buona idea controllare la proprietà che si desidera modificare in Animatable CSS.

Le animazioni e le transizioni CSS3 hanno funzionato con i prefissi dei fornitori per un lungo periodo di tempo, che non dobbiamo utilizzare più, tuttavia Mozilla Developer Network raccomanda ancora di aggiungere il -webkit prefisso per un po ', in quanto il supporto per i browser basati su Webkit solo recentemente raggiunto stabilità.