Cosa sono le transizioni CSS e come usarle

Pubblicato: 2022-02-16

In un articolo precedente, hai appreso i concetti di base delle animazioni CSS e come usarle. Potremmo dire che le transizioni sono una forma semplificata di animazione con alcune differenze tra loro, la forma di attivazione dell'animazione è quella più rilevante.

Un'altra differenza è che le transizioni hanno solo due stati (iniziale e finale), mentre puoi definire più stati per un elemento animato con la regola @keyframes . Le transizioni vengono attivate su un'azione, ad esempio quando si passa sopra un elemento, ma le animazioni possono verificarsi senza un'azione specifica, ad esempio con un ritardo dell'animazione dopo il caricamento della pagina.

In questo tutorial, impareremo i concetti di base delle transizioni CSS con un esempio pratico. Inoltre, imparerai anche come utilizzare uno sprite di immagini con CSS.

Iniziamo!

Passo 1. - Il layout proposto

Transizioni CSS e come usarle

Abbiamo 4 carte che promuovono i servizi regolari di una web agency. Passandoci sopra, ciascuno degli elementi all'interno della carta avrà una transizione diversa per ottenere l'effetto desiderato.

Passaggio 2. - L'HTML

  • Apri il tuo editor di codice preferito
  • Crea un file HTML chiamato index.html
  • Copia e incolla questo codice:
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
APRI IN POPUP
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 transizioni css 001

Il contenitore delle carte di servizio ha 4 carte diverse. Ogni scheda è composta da un'icona, un titolo, del testo e un link alle informazioni corrispondenti sul sito. Il testo e il link verranno mostrati passando il mouse sopra la scheda, altrimenti saranno nascosti.

Passaggio 3. - Gli stili CSS di base

  • Crea un file CSS e chiamalo style.css : nel codice HTML è già presente un collegamento a questo file e a Google Fonts
  • Copia e incolla questi stili per cambiare gli stili tipografici e il colore di sfondo delle carte:
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }
APRI IN POPUP
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 transizioni css 002

Passaggio 4. - Gli stili di layout

Usiamo CSS Grid per creare le carte e disporle orizzontalmente.

  • Modifica il codice CSS:
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Il contenitore delle carte di servizio è una griglia orizzontale a 4 colonne. Ogni carta è stata dichiarata anche come griglia contenitore a 2 righe. Si noti che abbiamo dichiarato un'altezza fissa per ogni carta.

191125 transizioni css 003

Passaggio #5. - Lo spirito dell'immagine

Secondo W3Schools, uno sprite di immagini è una raccolta di immagini inserite in una singola immagine. Risparmi larghezza di banda poiché la pagina non dovrà effettuare una richiesta del server per ogni immagine che deve caricare. Richiederà l'immagine una volta, quindi mapperai la parte richiesta dell'immagine all'interno del codice CSS.

191125 transizioni css 004

L'immagine è larga 240px e alta 480px. Ciascuna delle icone copre un'area di 120x120px. Per mappare ciascuna delle immagini, iniziamo nell'angolo in alto a sinistra dell'immagine con le coordinate (0px 0px) — seguendo l'ordine 'sinistra - in alto'.

In questo modo, le immagini sulla colonna di sinistra dello sprite si trovano in:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Queste sono le immagini da utilizzare prima del passaggio del mouse.

Le immagini sulla colonna di destra dello sprite si trovano in:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Modifica il codice CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }
APRI IN POPUP
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Il contenitore delle carte di servizio è una griglia orizzontale a 4 colonne. Ogni carta è stata dichiarata anche come griglia contenitore a 2 righe. Si noti che abbiamo dichiarato un'altezza fissa per ogni carta.

191125 transizioni css 003

Passaggio #5. - Lo spirito dell'immagine

Secondo W3Schools, uno sprite di immagini è una raccolta di immagini inserite in una singola immagine. Risparmi larghezza di banda poiché la pagina non dovrà effettuare una richiesta del server per ogni immagine che deve caricare. Richiederà l'immagine una volta, quindi mapperai la parte richiesta dell'immagine all'interno del codice CSS.

191125 transizioni css 004

L'immagine è larga 240px e alta 480px. Ciascuna delle icone copre un'area di 120x120px. Per mappare ciascuna delle immagini, iniziamo nell'angolo in alto a sinistra dell'immagine con le coordinate (0px 0px) — seguendo l'ordine 'sinistra - in alto'.

In questo modo, le immagini sulla colonna di sinistra dello sprite si trovano in:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Queste sono le immagini da utilizzare prima del passaggio del mouse.

Le immagini sulla colonna di destra dello sprite si trovano in:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Modifica il codice CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 transizioni css 005

Non male, vero? Aggiungiamo un tocco cosmetico per completare questa parte con un po' di imbottitura.

  • Modifica il codice CSS:
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }
APRI IN POPUP
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 transizioni css 006

Passaggio #6. - Le transizioni CSS

La proprietà di transizione CSS ha 4 diverse proprietà figlio:

  • proprietà di transizione (la proprietà dell'elemento a cui verrà applicata la transizione)
  • durata della transizione
  • funzione di temporizzazione di transizione
  • ritardo di transizione

La stenografia è:

transizione: [proprietà-transizione] [durata-transizione] [funzione-temporizzazione-transizione] [ritardo-transizione]

  • Modifica il codice CSS:
 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }


Come puoi notare, è possibile applicare più transizioni a proprietà di elementi differenti, separandole con una virgola. Nessuna di queste transizioni ha un ritardo.

Per far rotolare la carta verso l'alto, imposta un margine negativo in alto e aggiungi il valore assoluto di questo margine all'altezza dell'elemento (320px == 20em).

191125 transizioni css 008

È giunto il momento di indirizzare le immagini e farle cambiare con una transizione.

  • Modifica il codice CSS:
 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

Di nuovo:

  • proprietà di transizione: sfondo
  • durata della transizione: 0,4 s
  • funzione di temporizzazione di transizione: step-end

Il resto è solo mappatura alla coordinata esatta (dettagliata sopra) sullo sprite dell'immagine.

191125 transizioni css 009

Infine, prendiamo di mira il contenitore .hidden .

  • Modifica il codice CSS:
 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

Ci sono due dettagli qui di cui prendere nota:

  • La transizione sul colore del testo ha un ritardo di transizione di 0,2 s
  • La proprietà height dell'elemento cambia al passaggio del mouse senza una transizione 
191125 transizioni css 010

Le transizioni sono supportate da tutti i principali browser.

191125 transizioni css 011

Spero che questo esercizio ti sia piaciuto. Grazie per aver letto!

Il codice può essere trovato qui.