CSS – Le animazioni

Oggi parliamo di una funzionalità di CSS che apprezzo particolarmente perché permette di dare vita agli elementi della pagina. Parliamo di animazioni CSS.

Oramai lo avrete capito, sono veramente un fan sfegatato di Cascading Style Sheet, il fatto che ci stia scrivendo anche un libro conferma la cosa.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Dicevamo, parliamo di animazioni. CSS mette a disposizione alcune proprietà e regole che permettono di definire le caratteristiche dell’animazione che vogliamo applicare ai nostri elementi. Vediamoli in dettaglio e facciamo qualche esempio.

Le proprietà

Questo è l’elenco delle proprietà utili alla gestione dell’animazione. Queste proprietà vengono assegnate all’elemento che vogliamo animare.

animation-name
Identifica il nome dell’animazione che vogliamo applicare all’elemento

animation-duration
Definisce la durata dell’animazione, esempio: 4s, l’animazione durerà quattro secondi.

animation-delay
Rappresenta il ritardo che deve attendere l’animazione prima di iniziare, esempio: 2s, l’animazione inizierà dopo due secondi.

animation-iteration-count
Specifica il numero di volte in cui viene eseguita un’animazione. Impostando il valore infinite, l’animazione verrà eseguita in modo continuo (loop).

animation-direction
Specifica se un’animazione deve essere riprodotta in avanti, all’indietro o in cicli alternati, i possibili valori sono:

• normal– L’animazione viene riprodotta normalmente (in avanti). Questo è predefinito
• reverse – L’animazione viene riprodotta in senso inverso (all’indietro)
• alternate – L’animazione viene riprodotta prima in avanti, quindi all’indietro
• alternate-reverse – L’animazione viene riprodotta prima all’indietro, quindi in avanti

animation-timing-function
Questa proprietà, specifica la curva di velocità dell’animazione, i valori assegnabili sono:

• ease – Specifica un’animazione con avvio lento, quindi veloce, quindi fine lento (impostazione predefinita)
• linear – Specifica un’animazione con la stessa velocità dall’inizio alla fine
• ease-in – Specifica un’animazione con un avvio lento
• ease-out – Specifica un’animazione con una fine lenta
• ease-in-out – Specifica un’animazione con inizio e fine lenti
• cubic-bezier(n,n,n,n) – Consente di definire i propri valori in una funzione cubica-bezier

animation-fill-mode
Specifica uno stile per l’elemento quando l’animazione non viene riprodotta (prima che inizi, dopo che finisce, o entrambi). e animazioni CSS non influiscono sull’elemento prima della riproduzione del primo fotogramma chiave o dopo la riproduzione dell’ultimo fotogramma chiave.
I valori disponibili sono:

• none– Valore predefinito. L’animazione non applicherà alcuno all’elemento prima o dopo l’esecuzione
• forwards – L’elemento manterrà i valori di stile impostati dall’ultimo fotogramma chiave (dipende da animazione-direzione e animazione-iterazione-conteggio)
• backwards – L’elemento otterrà i valori di stile impostati dal primo fotogramma chiave (dipende dalla direzione dell’animazione) e li manterrà durante il periodo di ritardo dell’animazione
• both – L’animazione seguirà le regole sia in avanti che all’indietro, estendendo le proprietà dell’animazione in entrambe le direzioni

animation
Questa proprietà permette di definire in un’unica volta le caratteristiche dell’animazione che vogliamo applicare invece di utilizzare le singole proprietà. È l’equivalente di proprietà come border, overflow, ecc.
Questa è la modalità con la quale possiamo definire l’animazione usando questa proprietà.

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

La regola @keyframes

La regola @keyframes, come per @media, @support, ecc. è una regola di definizione. Questa permette infatti di definire i passaggi (keys) sulla nostra linea temporale di animazione, del resto se ne occupa il motore di render del browser che state utilizzando, l’animazione cambierà gradualmente dallo stile corrente al nuovo stile.

Ma come definisco un’animazione?

/* Definizione */
@keyframes <nome_animazione> {
    <key> { ... }
}

/* Esempio */
@keyframes primaanimazione  {
  from {
    background-color: red;
  }
  to {
    background-color: green;
  }
}

/* Elemento */
.animation {
  animation-name: primaanimazione;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

Posso ovviamente creare tutto le animazioni di cui ho bisogno, suggerisco di non usare nomi a caso, siate prolissi piuttosto che andare a codici che con il tempo potreste dimenticare.
Nell’esempio di seguito, ho applicato l’animazione definita sopra.

from…to

Per dichiarare i nostri passaggi sulla linea temporale, possiamo utilizzare due modalità, la prima è un semplice riferimento inizio (from) – fine (to), la seconda è un valore da 0% a 100% che identifica il valore progressivo dell’animazione, la durata dell’animazione è definita dalla proprietà animation-duration associato all’elemento che stiamo animando.

Possiamo, volendo, anche utilizzate l’insieme delle due dichiarazioni.

/* Esempio 1 - From/To */
@keyframes primaanimazione  {
  from {
    background-color: red;
  }
  to {
    background-color: green;
  }
}

/* Esempio 2 - % */
@keyframes primaanimazione  {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

/* Esempio 2 - Mix */
@keyframes primaanimazione  {
  from {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  to {
    background-color: green;
  }
}

Questo è il risultato degli esempi appena definiti.

Ogni passaggio che andiamo a definire può contenere ovviamente tutte le proprietà necessarie per animare il nostro elemento, dai colori, alla forma, alla posizione, alla dimensione, ecc.

Questi sono alcuni esempi di semplici animazioni utili a capire il livello di complessità che possiamo raggiungere.

Il prossimo passaggio è di rendere animati gli elementi con i quali interagiamo.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Al prossimo appuntamento, parleremo di transizioni, e altri effetti, che ci aiutano a dare vita alla nostra pagina. L’esperienza utente diventa molto più efficace se corredata dai giusti movimenti.

Happy

1 33 %

Sad

2 67 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

• About
• Latest Posts

Roberto Beccari

Mi chiamo Roberto, da più di 20 anni mi occupo di programmazione e usabilità, inoltre sono un fanatico della tecnologia. In questo blog parlo di quello che faccio, di come lo faccio e descrivo il mio modo di vedere il mondo attorno a me.
Se vuoi conoscermi e scambiare idee, la mia mappa è sempre pronta per essere estesa anche alle idee degli altri.

Latest posts by Roberto Beccari (see all)

• La lampada magica di OpenAI - Gennaio 19, 2023
• BOB, il primo programmatore - Gennaio 17, 2023
• Software e Accessibilità - Febbraio 18, 2022