Come utilizzare le transizioni e le trasformazioni CSS3 per creare animazioni

È possibile creare animazioni interessanti con CSS3 utilizzando trasformazioni e transizioni. Le trasformazioni vengono utilizzate per modificare un elemento da uno stato all'altro. Esempi potrebbero essere elementi rotanti, mobili, inclinati e ridimensionati. Senza una transizione, un elemento che viene trasformato 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 usare le trasformazioni CSS3

Esistono alcuni tipi di trasformazioni comunemente utilizzate. Ci concentreremo su esempi 2D per questo tutorial, ma è bene essere consapevoli del fatto 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 in 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 del grado 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 forniti 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() , solo l'asse x sarà interessato. Questo rettangolo è inclinato di 30 gradi lungo l'asse x:

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

obliquo

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 y, questo può essere fatto in un unico posto. Il metodo skew() inclina un elemento lungo l'asse xey 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 eseguendo 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 vuole un po' di ricerca 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 utilizzate frequentemente con le transizioni. Questo avrà più senso nei seguenti esempi di progettazione.

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

Se stai specificando molti valori, la scorciatoia tornerà utile. La proprietà CSS di 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à sarebbero 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 nel corso della 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 che inizi l'effetto di transizione. Initial imposterà la proprietà sul valore predefinito. Se inherit è specificato, significa che eredita la proprietà dal suo elemento padre.

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 abbreviata 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 eccessivamente. 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 progetti. Lo scopo di averli ripetuti è solo a scopo dimostrativo.

Spostamento di un'immagine con la proprietà di trasformazione CSS

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

Coordinate X e y

Le cose sembreranno leggermente diverse da come potresti aspettarti. Il valore -y è sopra l'asse x. HTML e CSS utilizzano quello che viene chiamato un "sistema di coordinate cartesiane invertito", perché le pagine Web iniziano dall'alto a sinistra e si leggono verso il basso.

Animazione uno: trasformazione di base con movimento orizzontale

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

Il primo progetto sarà lo spostamento di una grafica sottomarina. I sottomarini hanno bisogno di prendere aria di tanto in tanto, quindi lo 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 200px a destra e 25px in alto. La sintassi è transform: translate(200px,-25px); e l'oggetto si muoverà in bilico 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 creare 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 grazie alla 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, ciò sarebbe molto evidente.

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

La trasformazione viene utilizzata 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 @keyframes è dove si definiscono gli stili e le fasi per l'animazione. Ecco l'esempio che useremo, che aiuterà a dare un effetto "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 sono incorporati nei fotogrammi chiave. Il posizionamento originale è impostato su 0% e su 100%, la posizione si sposterà in basso di 30px.

Nozioni di base sull'animazione

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

Come utilizzare le query di funzionalità CSS

Il mondo del web design è in continua evoluzione ed è entusiasmante stare al passo con le nuove tendenze del design in CSS. Se sei uno dei primi ad adottare CSS, potresti già non vedere l'ora di usare cose come CSS Grid...

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

Ogni volta che lo fai, assicurati di assegnare all'animazione un nome descrittivo. In questo caso, stiamo usando fadeOut . Verrà applicata qualsiasi classe che include la fadeOut in uscita. Nelle fasi dell'animazione, "da" è impostato su 0% e "a" è impostato su 100%. Questo esempio è piuttosto semplice con solo le due fasi, ma ci possono sicuramente essere più passaggi aggiunti in mezzo.

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. Tempi, durata e altri dettagli chiave su come dovrebbe progredire la sequenza di animazione sono tutti inclusi nelle sottoproprietà.

Ecco alcuni esempi di sottoproprietà di animazione:

• Nome animazione: nome della @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 necessario per completare un ciclo completo di un'animazione.
• Funzione di temporizzazione dell'animazione: temporizzazione dell'animazione, in particolare come l'animazione passa attraverso i fotogrammi chiave. Questa funzione ha la capacità di stabilire curve di accelerazione. Esempi sono linear , ease , ease-in entrata , ease-out , ease-in-out o cubic-bezier .
• Ritardo animazione: ritardo tra il momento in cui l'elemento viene caricato e l'inizio dell'animazione.
• Conteggio iterazioni animazione: numero di volte in cui l'animazione deve essere ripetuta. Vuoi che l'animazione continui per sempre? È possibile specificare infinite per ripetere l'animazione all'infinito.
• Direzione dell'animazione: determina se l'animazione deve alternare o meno la direzione a ogni esecuzione della sequenza o ripristinare il punto iniziale e ripetersi.
• Modalità riempimento animazione: valori applicati dall'animazione sia prima che dopo l'esecuzione.
• Stato di riproduzione dell'animazione: con questa opzione, puoi mettere in pausa e riprendere la sequenza di animazione. 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 sarebbe 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 fa 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 in linea 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

È ora di celebrare i nostri progressi nell'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à nel corso della sua durata. Lo vedrai nell'animazione. Vedi come inizia un po' più lentamente e poi aumenta il ritmo?

È utile immaginare un involucro di Bezier come un quadrato. In basso a sinistra e in alto a destra si trovano 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. Si spera che vedere questi esempi di animazione CSS3 di base ti abbia aiutato a vedere quali altre possibilità ci sono.

Cosa c'è dopo: i plugin di WordPress che adorerai

Scarica questo ebook per un elenco dei nostri plugin più consigliati per gli sviluppatori! Abbiamo riscontrato che tutti questi plugin sono semplici da usare, non troppo performanti sul tuo sito e semplicemente affidabili.