Le potenzialità di CSS3 nella produzione di animazioni di alta qualità è evidenziata
dall’enorme quantità di esempi messi a disposizione dal web. In questa lezione analizzeremo
alcuni esempi pratici di quanto visto nelle precedenti lezioni,
con lo scopo di comprendere appieno come sfruttare CSS3 per il web motion design.
Tutti gli esempi seguenti sono disponibili su Codepen
e possono essere liberamente visualizzati, scaricati e modificati.
Come detto nella lezione introduttiva, alcuni esempi
riporteranno piccoli frammenti di codice JavaScript,
ma il focus rimarrà sempre su CSS3, lo strumento
più adatto per "animare" le pagine web.
JavaScript Mickey Watch
Il primo esempio che analizzeremo è l’orologio di Mickey Mouse,
disponibile nella sua versione integrale a questo link.
Fondamentalmente consiste in due animazioni. La prima fa ruotare le braccia
di Mickey fino a posizionarle sull’ora corrente, e la seconda fa muovere continuamente la lancetta dei minuti dando l’impressione dello scorrere dei secondi.
La prima animazione è scritta in Javascript, sebbene infine utilizza CSS3 per il movimento.
La funzione settimeout viene eseguita dopo un secondo da quando lo script sarà caricato in memoria,
e non fa altro che acquisire l’ora corrente:
var hours = new Date().getHours();
var minutes = new Date().getMinutes();Successivamente, essa invoca la funzione per far ruotare le braccia di Mickey:
set($hours, 30 * hours);
set($minutes, 6 * minutes);La funzione set, muove un elemento della pagina HTML
(in questo caso rispettivamente il braccio delle ore e dei minuti),
tramite l’invocazione della funzione di rotazione di CSS3:
$elmt.style.transform = 'rotate(' + deg + 'deg)';Il “trucco” è all’interno del CSS. Infatti, le braccia non si posizionano immediatamente sulla posizione corretta,
ma lo fanno gradualmente grazie all’utilizzo dell’istruzione
contenuta all’interno della definizione delle regole #hours e #minutes:
transition: transform 1s;La seconda animazione è molto semplice,
è interamente parte del CSS,
e riguarda l’oscillazione del braccio di Mickey.
Esso viene continuamente ridimensionato tra il 100% ed il 95% della sua dimensione originale,
per dare l’impressione dello scorrere del tempo:
#minutes:after {
content: '';
display: block;
animation: seconds infinite 1s;
}
@keyframes seconds {
0% {
transform: scale(1);
}
50% {
transform: scale(.95);
}
100% {
transform: scale(1);
}
}SVG/CSS Loader
L’animazione che vedremo adesso riguarda il classico simbolo di caricamento di una pagina,
particolarmente utile per pagine pesanti o che eseguono codice complesso.
Il codice sorgente è disponibile qui.
A parte alcuni dettagli poco rilevanti, che riguardano lo sfondo ed il cerchio bianco,
il cuore dell’animazione è composto da 18 triangolini colorati che cambiano colore e
danno l’impressione di qualcosa che stia “ruotando”.
La lista dei colori assunti da ciascun triangolo è definita all’interno del CSS:
$firstColor: #0057B8;
$listColors: #F11E4A, #F8A527, #266D7F, #82A, $firstColor;I triangoli sono elementi della classe path, che vedranno applicata
l’animazione denominata pweek in loop infinito e tramite una transizione lineare. Per dare
l’impressione del movimento, si utilizza un delay adattivo dipendente dall’indice stesso del triangolino:
#svg {
display: inline-block;
vertical-align: middle;
fill: $firstColor;
@for $i from 1 through 18 {
path:nth-child(#{$i}) {
animation: pweek $delayCoeff*$pathNumber linear infinite;
animation-delay: $i*$delayCoeff;
}
}
}L’animazione pweek non fa altro che applicare ripetutamente i cinque colori listati:
@keyframes pweek {
0% {
fill: $firstColor;
}
@for $i from 1 through length($listColors) {
#{$i*(100/length($listColors))}% {
fill: nth($listColors, $i);
}
}
}Se vogliamo bloccare l’animazione per qualche istante quando si passa sopra il cerchio con il mouse,
modifichiamo il codice del CSS aggiungendo le seguenti righe:
#svg:hover {
@for $i from 1 through 18 {
path:nth-child(#{$i}) {
animation-play-state: paused;
}
}
}Star Wars: The Force Awakens
Un’altra bellissima animazione è quella di Star Wars, che troverete disponibile
qui
È composta da tre classi, cioè star, wars e byline, quest’ultima contenente il testo the force awakens.
Se osservate bene l’animazione, il testo della classe byline ruota e si muove
e per questo motivo vengono applicate due animazioni differenti: spin-letters e move-by-line.
Per ruotare le lettere viene utilizzata la funzione rotateY(),
mentre per fare allontanare la scritta si utilizza translateZ():
@keyframes spin-letters {
0%, 10% {
opacity: 0;
transform: rotateY(90deg);
}
30% {
opacity: 1;
}
70%, 86% {
transform: rotateY(0);
opacity: 1;
}
95%, 100% {
opacity: 0;
}
}
@keyframes move-byline {
0% {
transform: translateZ(5em);
}
100% {
transform: translateZ(0);
}
}
Per specificare la distanza dell’animazione dall’osservatore, si utilizza la parola chiave perspective:
.starwars-demo {
perspective: 800px;
transform-style: preserve3d;
}Planets
Passiamo all’ultima e più complessa animazione di questa carrellata di esempi.
Essa simulata il moto di rivoluzione dei pianeti attorno al sole.
Il codice sorgente è disponibile sempre su CodePen.
I pianeti definiti nel sorgente HTML sono terra, marte, mercurio, giove e venere.
Ciascun pianeta è definito da tre div, innestati l’uno dentro l’altro.
Il più esterno è identificato da una classe avente come nome il pianeta stesso,
quelli più interni sono invece di classe planet e shadow.
Il codice CSS, seppure molto lungo, è ben organizzato.
Prima di tutto, l’animazione del sole non fa altro che fare ruotare in senso antiorario
la sua immagine da 0 a -360 gradi:
.sun .star {
animation: spinsun 40s infinite linear;
}
@keyframes spinsun {
0% { transform: rotate(0); }
100% { transform: rotate(-360deg); }
}
Il codice dei pianeti si ripete tale e quale.
Ciò che cambia è la durata e l’ampiezza dell’orbita. A titolo di esempio, analizzeremo
il codice relativo alla terra.
Prima di tutto, il div contenente la terra,
definisce l’utilizzo dell’animazione orbitearth con periodo 20 secondi:
.earth {
position: absolute;
width: 610px;
z-index:4;
animation: orbitearth 20s infinite linear;
top: -20px;
}L’animazione in questione non fa altro che ruotare
il div tramite rotateY(), cambiandone inoltre lo z-index in modo opportuno
per renderlo invisibile quando si trova alle spalle del sole:
@keyframes orbitearth {
0% { z-index:4; transform: rotateY(0); }
49% {z-index:4;}
50% {z-index:-4;}
99% {z-index:-4;}
100% { z-index:4; transform: rotateY(360deg);}
}Ciò tuttavia non è sufficiente a fornire un’animazione corretta.
Infatti, bisogna modificare l'aspetto della Terra mentre ruota attorno al Sole.
Per farlo, è necessario impostare l’immagine da mostrare, le sue dimensioni
e l’animazione da eseguire sull’immagine stessa per contrastare l’effetto della rotazione del div earth
attorno al sole:
.earth .planet {
width:40px;
height:40px;
background-image: url(http://www.waynedunkley.com/img/solar_system/earth.png?v=2);
animation: anti-spin 20s infinite linear;
}L’animazione anti-spin,
serve a tenere l’immagine della terra piatta mentre il div
padre ruota attorno al sole. Commentandola, possiamo osservare cosa accadrebbe se essa non fosse definita:
@keyframes anti-spin {
from { transform: rotateY(0); }
to { transform: rotateY(-360deg); }
}Infine, per simulare l’ombra del pianeta,
viene applicata un’animazione che muove la posizione dello sfondo verso l’osservatore,
coprendo gradualmente l’immagine mostrata:
.earth .shadow {
animation: shadow 20s infinite linear;
}
@keyframes shadow {
0% { background-position: 130% 0%; }
33%{ background-position: 50% 0%; }
55% { background-position: 0% 0%; }
80%{ background-position: -50% 0%; }
100%{ background-position: -50% 0%; }
}