Come utilizzare le transizioni e le trasformazioni CSS3 per creare animazioni

Animazioni interessanti possono essere create con CSS3 utilizzando trasformazioni e transizioni. Le trasformazioni vengono utilizzate per modificare un elemento da uno stato a un altro. Esempi potrebbero essere la rotazione, lo spostamento, l'inclinazione e il ridimensionamento degli elementi. Senza una transizione, un elemento in trasformazione cambierebbe bruscamente da uno stato all'altro. Per evitare ciò, è possibile aggiungere una transizione in modo da poter controllare la modifica, rendendola più fluida.

Come utilizzare le trasformazioni CSS3

Esistono alcuni tipi di trasformazioni comunemente utilizzate. Ci concentreremo su esempi 2D per questo tutorial, ma è bene sapere che si possono fare cose interessanti anche con le trasformazioni 3D. (Una volta che avrai imparato il 2D, il 3D sarà molto più semplice!)

Negli esempi seguenti, i rettangoli originali sono di un verde più scuro e quelli trasformati sono un po' più trasparenti.

Tradurre

Il metodo translate() sposta un elemento dalla sua posizione corrente a una nuova.
Con questo codice, il rettangolo regolato viene spostato di 40 pixel a destra e di 100 pixel in basso rispetto alla posizione corrente.

 -ms-transform: translate(40px, 100px); /* IE 9 */ -webkit-transform: translate(40px, 100px); /* Safari */ transform: translate(40px, 100px);

Ruotare

Il metodo rotate() ruota un elemento in senso orario o antiorario del valore in gradi specificato. Questo codice ruota il rettangolo in senso orario di 40 gradi.

 -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari */ transform: rotate(40deg);

Scala

Il metodo scale() aumenta o diminuisce la dimensione di un elemento (secondo i parametri dati per la larghezza e l'altezza). In questo esempio, il rettangolo regolato è due volte più grande della sua larghezza originale e tre volte più grande della sua altezza originale.

 -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3);

SkewX

Con skewX() , sarà interessato solo l'asse x. Questo rettangolo è inclinato di 30 gradi lungo l'asse x:

 -ms-transform: skewX(30deg); /* IE 9 */ -webkit-transform: skewX(30deg); /* Safari */ transform: skewX(30deg);

SkewY

Questa è la stessa idea, ma sull'asse y. Il metodo skewY() inclina un elemento lungo l'asse y dell'angolo definito. Questo rettangolo è inclinato di 30 gradi lungo l'asse y.

 -ms-transform: skewY(30deg); /* IE 9 */ -webkit-transform: skewY(30deg); /* Safari */ transform: skewY(30deg); }

Storto

Se vuoi inclinare sia l'asse x che l'asse y, puoi farlo in un unico posto. Il metodo skew() inclina un elemento lungo gli assi x e y utilizzando gli angoli specificati. L'esempio seguente inclina l'elemento rettangolo di 30 gradi lungo l'asse x e di 20 gradi lungo l'asse x.

 -ms-transform: skew(30deg, 20deg); /* IE 9 */ -webkit-transform: skew(30deg, 20deg); /* Safari */ transform: skew(30deg, 20deg);

Matrice

È qui che le cose si fanno interessanti, ma anche più efficienti nella giusta situazione. Se stai facendo molte trasformazioni e non vuoi scriverle tutte singolarmente, queste trasformazioni 2D possono essere combinate con il metodo matrix() .

Ecco uno schema di base da seguire:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Solo un avvertimento, ci vogliono alcune ricerche per trovare i valori nella matrice. Ecco una guida utile per iniziare.

Per fare questo esempio, ecco i valori della matrice:

 -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(2, -0.3, 0, 1, 0, 0);

Come utilizzare le transizioni CSS3

Ora che le trasformazioni sono state trattate, è importante notare che vengono spesso utilizzate con le transizioni. Ciò avrà più senso nei seguenti esempi di progettazione.

È bene tenere presente che i valori possono essere personalizzati per eseguire la transizione tra due stati di un elemento proprio come si desidera. Pensalo come un modo per controllare la velocità dell'animazione quando cambi le proprietà CSS. Un esempio che probabilmente ti sei imbattuto è se passi il mouse su un pulsante. È comune vedere un "lento scurimento" piuttosto che un rapido istantaneo colore più scuro quando ci si passa sopra con il mouse. Questo "lento oscuramento" è stato creato con una transizione.

Se stai specificando molti valori, la scorciatoia ti tornerà utile. La proprietà CSS transition è una proprietà abbreviata per transition-property , transition-duration , transition-timing-function e transition-delay .

Dettagli di transizione

La transition-property specifica la proprietà CSS in cui verrà applicata la transizione, poiché è possibile applicare una transizione a una singola proprietà. Esempi di applicazione di una transizione a una singola proprietà potrebbero essere su uno sfondo o una trasformazione. Se desideri scegliere come target tutte le proprietà del sito, la proprietà transform può essere impostata su all .

La transition-duration è utile per fare in modo che le modifiche in una proprietà avvengano in un periodo di tempo specificato anziché immediatamente. Vedrai secondi e millisecondi come valori possibili.

 transition-duration: 7s; transition-duration: 120ms; transition-duration: 2s, 3s; transition-duration: 10s, 30s, 230ms;

La proprietà CSS transition-timing-function consente di stabilire una curva di accelerazione, in modo che la velocità della transizione possa variare durante la sua durata. Ci sono molte opzioni con cui sperimentare.

 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

Il transition-delay è abbastanza autoesplicativo. Un valore specificato imposta il numero di secondi o millisecondi di attesa prima dell'inizio dell'effetto di transizione. Initial imposterà la proprietà sul suo valore predefinito. Se inherit è specificato, significa che eredita la proprietà dal suo elemento genitore.

 Here are all the properties: transition-property: background; //all transition-duration: 1s; transition-timing-function: linear; //other options are ease transition-delay: 0.5s;

Ecco la configurazione abbreviata di base per una transizione:

 div { transition: [property] [duration] [timing-function] [delay]; }

La sequenza stenografica completa:

 div { transition: background 1s linear 0.5s; }

Pianificazione dell'animazione

Prima di creare animazioni davvero dettagliate, è bene fare un passo indietro prima di creare qualcosa di totalmente folle (soprattutto se sarà pubblico sul web). Non c'è niente di sbagliato nell'aggiungere un tocco divertente, ma si è tentati di animare troppo. Il movimento che crei dovrebbe trasmettere significato e migliorare l'esperienza dell'utente, non distrarlo. Detto questo, è ora di iniziare a creare!

Voglio sottolineare che ci sono gif animate in questo tutorial per mostrare le animazioni. Le gif sono ripetute, cosa che in genere non verrebbe eseguita per i disegni. Lo scopo di ripeterli è solo a scopo dimostrativo.

Spostare un'immagine con la proprietà CSS Transform

Prima di addentrarci in trasformazioni e transizioni complicate, parliamo di coordinate su una griglia di assi. (Avvertimento: questo potrebbe riportare alla mente ricordi di carta millimetrata dai corsi di matematica.) Le coordinate vengono utilizzate per spostare l'immagine.

Coordinate X e Y

Le cose avranno un aspetto leggermente diverso da quello che potresti aspettarti. Il valore -y è sopra l'asse x. HTML e CSS usano quello che viene chiamato un "sistema di coordinate cartesiane invertite", perché le pagine web iniziano dall'alto a sinistra e si leggono verso il basso.

Animazione uno: trasformazione di base con movimento orizzontale

Abbiamo toccato brevemente la base su translate() e su come può spostare un elemento. Quando viene messo in pratica, può davvero far galleggiare la tua barca, letteralmente. Come abbiamo visto in precedenza, il metodo translate() sposta un elemento dalla sua posizione corrente (in base ai parametri forniti per l'asse x e l'asse y).

Il primo progetto sposterà una grafica sottomarina. I sottomarini hanno bisogno di prendere aria una volta ogni tanto, quindi li modelleremo attentamente con translate() .

Per spostarlo dalla sua posizione iniziale usando transform: translate(x,y) , dovranno essere specificati due nuovi valori. Per far muovere il sottomarino verso destra e verso l'alto, il valore x dovrebbe essere positivo e il valore y dovrebbe essere negativo. Se il valore y è impostato su 0, si sposterebbe solo a destra e non in alto.

Sottomarino in volo con transform()

In questo esempio sposteremo l'oggetto di 200px a destra e di 25px in alto. La sintassi è transform: translate(200px,-25px); e l'oggetto si sposterà al passaggio del mouse su .underwater . Creando gli stili per il movimento in .underwater:hover .move-right , l'azione avverrà al passaggio del mouse.

Ecco l'HTML di partenza:

 <div class="underwater"> <div class="object submarine move-right"> <!-- image is set as a background image on submarine --> </div> </div>

Vedi questo su Codepen.

Non ci vuole davvero molto CSS per realizzare questa animazione di base:

 .underwater { position: relative; min-height: 600px; background-color: #4fc3da; } .underwater:hover .move-right{ transform: translate( 200px ,-25px ); -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/ -ms-transform: translate( 200px ,-25px ); /** Firefox **/ } .submarine { height: 200px; background: url("little-submarine.svg") no-repeat; } .object { transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -ms-transition: all 2s ease-in-out; /** Opera **/ }

Come puoi vedere, le nostre coordinate cadrebbero nel quadrato in alto a destra. Al passaggio del mouse, il sottomarino si sposta verso le nuove coordinate a causa della trasformazione.

Le cose sembrano lisce a causa della transizione. La transition-duration è stata impostata su 2sec , che non è troppo veloce per questa animazione. La transition-timing-function è stata impostata su ease-in-out che gli conferisce un inizio e una fine più lenti. Se il tempo di durata fosse aumentato a qualcosa di più grande, questo sarebbe molto evidente.

Animazione di base due: movimento orizzontale con fotogrammi chiave e animazione

Transform viene utilizzato in modo leggermente diverso in questo esempio. I fotogrammi chiave e la proprietà dell'animazione verranno utilizzati per creare l'animazione successiva.

Nozioni di base sui fotogrammi chiave

All'interno di @keyframes è dove si definiscono gli stili e le fasi per l'animazione. Ecco l'esempio che useremo, che aiuterà a dare un effetto di "dissolvenza in entrata mentre ci si sposta verso il basso":

 @keyframes fadeInDown { 0% { opacity: .8; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(0, 30px); } }

I valori di trasformazione vengono incorporati nei fotogrammi chiave. Il posizionamento originale è impostato allo 0% e al 100% la posizione si sposta verso il basso di 30 px.

Nozioni di base sull'animazione

Per utilizzare l'animazione CSS3, devi specificare i fotogrammi chiave per l'animazione.

Come progettato sopra, @keyframes contiene gli stili che l'elemento avrà in determinati momenti.

Ogni volta che lo fai, assicurati di dare all'animazione un nome descrittivo. In questo caso, stiamo usando fadeOut . Verrà applicata qualsiasi classe che includa il fadeOut . Nelle fasi dell'animazione, "da" è impostato su 0% e "a" è impostato su 100%. Questo esempio è piuttosto semplice con solo le due fasi, ma possono sicuramente essere aggiunti altri passaggi intermedi.

Azioni specifiche con sottoproprietà di animazione

La proprietà animation viene utilizzata per chiamare @keyframes all'interno di un selettore CSS. Le animazioni possono e avranno spesso più di una sottoproprietà.

I fotogrammi chiave definiscono l'aspetto dell'animazione; le sottoproprietà definiscono regole specifiche per l'animazione. I tempi, la durata e altri dettagli chiave su come dovrebbe progredire la sequenza di animazione sono tutti inclusi nelle sottoproprietà.

Di seguito sono riportati alcuni esempi di sottoproprietà di animazione:

• Animation-name: nome di @keyframesat-rule , che descrive i fotogrammi chiave dell'animazione. Il nome fadeOut nell'esempio precedente è un esempio di animation-name .
• Durata dell'animazione: il tempo che un'animazione dovrebbe impiegare per completare un ciclo completo.
• Animation-timing-function: temporizzazione dell'animazione, in particolare come l'animazione passa attraverso i fotogrammi chiave. Questa funzione ha la capacità di stabilire curve di accelerazione. Gli esempi sono linear , ease , ease-in , ease-out , ease-in-out o cubic-bezier .
• Animation-delay: ritardo tra il momento in cui l'elemento viene caricato e l'inizio dell'animazione.
• Animation-iteration-count: numero di volte in cui l'animazione deve ripetersi. Vuoi che l'animazione continui all'infinito? È possibile specificare infinite per ripetere l'animazione all'infinito.
• Direzione dell'animazione: determina se l'animazione deve o meno alternare la direzione a ogni esecuzione della sequenza o reimpostarsi al punto iniziale e ripetersi.
• Animation-fill-mode: valori applicati dall'animazione sia prima che dopo l'esecuzione.
• Animation-play-state: Con questa opzione, puoi mettere in pausa e riprendere la sequenza di animazione. Gli esempi sono none , forwards , backwards o both .

 .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

Ecco come sembrerebbe scritto in stenografia:

 animation: 4s ease-in-out 1 paused fadeInDown;

Ecco la struttura HTML:

 <div class="underwater"> <div class="content-wrap fadeInDown"> <div class="submarine"></div> <h2>Cute Submarine</h2> <p>Text here.</p> </div> </div>

La classe di fadeInDown sta facendo muovere il sottomarino e il contenuto su e giù.

Rendere l'animazione più fluida regolando i fotogrammi chiave

Con qualche fotogramma chiave in più, possiamo rendere l'animazione molto più fluida.

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(5px); } 25% { opacity: .9; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: .9; transform: translateY(0); } }

Vedi questo su Codepen.

Regolazione dei tempi dell'animazione

L'aggiunta di più fotogrammi chiave ha contribuito a rendere più fluida l'animazione, ma possiamo aggiungere un po' più di interattività con più fotogrammi chiave e un ritardo del testo sul div che contiene tutto il testo. È un effetto divertente far rimbalzare il sottomarino sul testo, quindi avere il ritardo allineato con il movimento del sottomarino lo consente.

L'HTML avrà le classi effettive applicate:

 <div class="underwater"> <div class="submarine move-down fadeInDown"> </div> <div class="moving-content move-down text-delay fadeInDownText"> <p>Text goes here.</p> </div> </div>

Ed ecco il CSS aggiornato che consente l'animazione interattiva:

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(0); } 25% { opacity: 1; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDownText { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 1; transform: translateY(35px); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .fadeInDownText { -webkit-animation-name: fadeInDownText; animation-name: fadeInDownText; } .move-down{ -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .text-delay { -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

Vedi questo su Codepen.

Barra di avanzamento Cubic-bezier nell'animazione CSS3

È tempo di celebrare i progressi dell'animazione creando una barra di avanzamento!

Tutti i concetti che abbiamo trattato si uniranno per creare qualcosa di simile. Una barra di avanzamento è un elemento dell'interfaccia utente molto comune, quindi creare qualcosa di funzionale come questo ti aiuterà a vedere come possono essere animati altri elementi web.

Ecco l'HTML di partenza:

 <div class="container"> <div class="row"> <div class="masthead"> <p>CSS3 Loading Bar</p> </div> </div> <div class="fast-loader"></div> </div>

E il CSS per farlo prendere vita:

 @keyframes speedSetting { 0% { width: 0px; } 100% { width: 100%; } } @keyframes progressMotion { 0% { opacity: 1; } 50% {opacity: 1; } 100% { opacity: 0; } } .fast-loader { width: 0px; height: 10px; background: linear-gradient(to left, blue,rgba(255,255,255,.0)); animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; -webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; }

Nel primo set di fotogrammi chiave, la larghezza va da 0 a 100% con una durata di due secondi. I fotogrammi chiave in progressMotion controllano l'opacità.

Curva di Bézier CSS

La funzione cubic-bezier() può essere utilizzata con la proprietà transition-timing-function per controllare come una transizione cambierà velocità durante la sua durata. Lo vedrai nell'animazione. Vedi come inizia un po' più lentamente e poi aumenta il ritmo?

È utile immaginare un involucro bezier come un quadrato. In basso a sinistra e in alto a destra ci sono i punti chiave, che sono P0 e P3. Questi sono sempre impostati su (0,0) e (1,1), che non cambiano. Tuttavia, P1 e P2 possono essere spostati con la funzione cubic-bezier() se si specificano nuovi punti con un valore x o y.

• x1 è la coordinata x del punto di controllo p1
• y1 è la coordinata y del punto di controllo p1
• x2 è la coordinata x del punto di controllo p2
• y2 è la coordinata y del punto di controllo p2

Ecco alcuni valori di esempio:

x1 = .7
y1 = .16
x2 = .2
y2 = .9

Quindi un esempio potrebbe assomigliare a questo:

 cubic-bezier(.7,.16,.2,.9)

La barra di avanzamento è un ottimo esempio di come un bezier può personalizzare i tempi di un'animazione. Con trasformazioni, transizioni e molte altre opzioni, è possibile creare facilmente animazioni personalizzate. Speriamo che vedere questi esempi di animazione CSS3 di base ti abbia aiutato a vedere quali altre possibilità ci sono.