Come animare con CSS

Ci siamo abbastanza abituati a vedere le animazioni sui siti Web e ad apprezzare l'energia e la varietà che apportano al web design. Sono accattivanti, un ottimo modo per aggiungere un po' di interesse visivo a un sito e, in generale, rendere l'esperienza più eccitante per i tuoi utenti.

Sebbene tradizionalmente realizzati con GIF, SVG, WebGL e video di sfondo, le animazioni possono anche essere create in modo efficiente con CSS. Il supporto del browser per le animazioni CSS è notevolmente migliorato e sta diventando piuttosto popolare: i browser compatibili includono Firefox 5+, IE 10+, Chrome, Safari 4+ e Opera 12+.

Oggi ti guiderò attraverso le basi della creazione di un'animazione CSS con una demo passo passo. Rimani in giro e dai un'occhiata a cinque esempi di animazioni. Potrai utilizzare tutte queste idee per creare animazioni per i tuoi progetti!

Nozioni di base sull'animazione CSS

Ovviamente, è importante coprire le basi di come funzionano le animazioni prima di immergerci nelle cinque divertenti animazioni CSS.
Ad esempio, i fotogrammi chiave sono un componente chiave delle animazioni CSS. Potresti avere familiarità con questo termine se hai lavorato con Adobe Flash o hai esperienza con l'editing video. In tal caso, il termine fotogramma chiave è proprio quello che penseresti: è un modo per specificare una determinata azione.

Potresti aver già incontrato @keyframes in un foglio di stile CSS. All'interno di questo @keyframes è dove si definiscono gli stili e le fasi per l'animazione. Ecco un ottimo esempio di effetto dissolvenza:

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Le basi del fotogramma chiave di dissolvenza che abbiamo appena creato includono:

• Un nome descrittivo: in questo caso, fadeOut.
• Fasi dell'animazione: Da è stato impostato su 0% e A è stato impostato su 100%.
• Stili CSS che verranno applicati in ogni fase.

Per impostazione predefinita, Da sarà a 0% e A sarà a 100%, poiché in questo esempio non sono specificate altre fasi.

Azioni specifiche con sottoproprietà di animazione

Abbiamo bisogno di fare un po' di più per dare uno stile alle cose: abbiamo bisogno di dare uno stile alla proprietà animation con sottoproprietà. Se i fotogrammi chiave definiscono l'aspetto dell'animazione, le sottoproprietà dell'animazione definiscono regole specifiche per l'animazione. Questi ti consentono di configurare i tempi, la durata e altri dettagli chiave di come dovrebbe progredire la sequenza 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à. Ecco alcuni esempi di sottoproprietà:

Collaborazione con un artista di motion graphics

Niente può dare vita ai tuoi progetti come l'animazione. Ma se non hai mai lavorato con un animatore o un artista di motion graphics, il movimento potrebbe sembrare un mondo estraneo. Se stai pensando a p...

• Nome animazione: nome della regola @keyframes , che descrive i fotogrammi chiave dell'animazione. Il nome fadeOut nell'esempio precedente è un esempio di nome-animazione.
• Durata dell'animazione: il tempo che un'animazione dovrebbe impiegare per completare un ciclo completo.
• 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 lineare, facilità, facilità-in, facilità-out, facilità-in-out o cubic-bezier .
• Animation-delay: 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: indipendentemente dal fatto che l'animazione debba o meno alternare 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 è possibile mettere in pausa e riprendere la sequenza dell'animazione. Gli esempi sono nessuno, avanti, indietro o entrambi .

Mettendo tutto insieme per il miglior supporto del browser

C'è molto da fare qui e la terminologia può essere un po' confusa. Ma ora sappiamo che i fotogrammi chiave definiscono l'aspetto dell'animazione e le diverse fasi dell'animazione e che la proprietà dell'animazione utilizza le proprietà secondarie per definire opzioni di animazione come ritardo, direzione, tempistica e così via.

Probabilmente hai familiarità con i prefissi del fornitore o del browser: sono necessari quando si lavora con le animazioni. Dobbiamo assicurarci di avere il miglior supporto per il browser. Ecco i prefissi standard del browser:

• Chrome e Safari: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-

Internet Explorer 10 non richiede un prefisso per le transizioni, ma tutte le trasformazioni richiedono il prefisso. Opera è coperto perché riconosce gli stili WebKit.

Inizio della transizione

• -webkit-transition
• -moz-transition
• transition

Inizio trasformazione:

• -webkit-transform
• -moz-transform
• -ms-transform
• transform

Cinque animazioni in azione

Ora che abbiamo coperto le basi, creiamo del codice da utilizzare!

Animazione uno: da cerchio a quadrato

Andiamo in dettaglio su questo primo, così possiamo assicurarci di comprendere tutti i concetti che abbiamo trattato finora. L'animazione inizierà come un cerchio e si trasformerà in un quadrato.

Creare un div per iniziare è un ottimo modo per testare l'animazione:

<div class=”animationOne”>
</div>

Ora configuriamo i nostri @keyframes . Questa animazione avrà cinque fasi perché un quadrato ha quattro lati e dobbiamo avere un punto di partenza dello 0%. Usa i prefissi, come mostrato di seguito, ma per il resto del tutorial lo terremo semplice con solo le basi.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Ora creiamo alcuni stili per determinare quale sarà il raggio del bordo in ogni fase:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Ora aggiungi la proprietà background-color per differenziare ogni fase dell'animazione:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

Infine, applichiamo l'animazione al test div:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

La proprietà di animazione è in genere scritta in forma abbreviata, quindi ecco cosa sta effettivamente succedendo nel codice:

• Il nome dell'animazione è circle-to-square .
• La durata dell'animazione è di 2s .
• Il ritardo dell'animazione è 1s .
• Il conteggio delle iterazioni dell'animazione è infinite , quindi continuerà all'infinito.
• E la direzione dell'animazione è alternate . Ciò significa che suonerà dall'inizio alla fine e tornerà all'inizio.

Animazione due: rotazione

Questa animazione consente la rotazione di un oggetto.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

Per mantenere separati i nostri progetti di animazione, ricorda di creare un altro div per questo secondo esempio. Ho aggiunto un colore di sfondo perché aggiungeremo l'animazione al div stesso per questo esempio.

La durata di questa animazione è di due secondi, con un ritardo di tre secondi. Il conteggio delle iterazioni dell'animazione è cinque, quindi questo progetto si animerà cinque volte prima di interrompersi. L'animazione viene riprodotta al contrario ogni volta dispari (1,3,5,... ) e in direzione normale ogni volta pari (2,4,6,... ).

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Animazione tre: espandi e sfarfallio

Questa è un'ottima animazione per un pulsante perché è più accattivante e prominente rispetto ad altri elementi della pagina. Questo potrebbe anche essere qualcosa di utile da includere in uno stato :hover .

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Per utilizzare il test, abbiamo bisogno del seguente div iniziale:

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

Animazione quattro: diapositiva di testo
Aggiungiamo alcune animazioni al testo. Questo progetto fa scorrere il tuo testo una volta da sinistra.

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Animazione cinque: dissolvenza in entrata

Hai dei contenuti a sorpresa? Dai un'occhiata a questa animazione in dissolvenza per i contenuti che desideri vengano visualizzati in un secondo momento. Hai molte opzioni qui: la dissolvenza in entrata può essere veloce o lenta, verificarsi una o più volte e così via.

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

Le animazioni CSS3 sono fantastiche per far muovere il tuo sito web! Ora che hai i concetti di base per creare animazioni, le possibilità di animazione sono infinite. Cosa animerai?