In questo post scoprirai come sono state create alcune animazioni popolari trovate su CodePen. Queste animazioni utilizzano tutte le tecniche di esecuzione discusse in altri articoli di questa sezione.
Consulta l'articolo Perché alcune animazioni sono lente? per conoscere la teoria alla base di questi consigli e la Guida alle animazioni per suggerimenti pratici.
Caricamento della procedura guidata di animazione
Visualizza l'animazione di caricamento della procedura guidata su CodePen
Questa animazione di caricamento è creata interamente con CSS. L'immagine e tutte le animazioni sono state create in CSS e HTML, senza immagini o JavaScript. Per capire come è stato creato e le sue prestazioni, puoi utilizzare Chrome DevTools.
Ispezionare l'animazione con Chrome DevTools
Con l'animazione in esecuzione, apri la scheda Prestazioni in Chrome DevTools e registra alcuni secondi dell'animazione. Nel riepilogo dovresti notare che il browser non esegue operazioni di layout o di colorazione durante l'esecuzione dell'animazione.
Per scoprire come si è ottenuta questa animazione senza causare layout e colorazione, controlla gli elementi in movimento in Chrome DevTools. Puoi utilizzare il riquadro Animazioni per individuare i vari elementi animati. Se fai clic su un elemento, li evidenzierai nel DOM.
Ad esempio, seleziona il triangolo e osserva come il riquadro dell'elemento si trasforma durante il suo viaggio nell'aria, ruotando per poi tornare alla posizione iniziale.
Con l'elemento ancora selezionato, guarda il riquadro Stili. Qui puoi vedere il codice CSS che disegna la forma del triangolo e l'animazione in uso.
Come funziona
Il triangolo viene creato utilizzando lo pseudo-elemento ::after per aggiungere contenuti generati,
utilizzando i bordi per creare la forma.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
L'animazione viene aggiunta con la seguente riga di CSS:
animation: path_triangle 10s ease-in-out infinite;
In Chrome DevTools puoi trovare i fotogrammi chiave scorrendo verso il basso nel riquadro Stile.
Qui scoprirai che l'animazione è stata creata utilizzando transform per modificare la posizione dell'elemento e ruotarlo.
La proprietà transform è una delle proprietà descritte nella Guida alle animazioni,
che non consente al browser di eseguire operazioni di layout o colorazione (che sono le cause principali delle animazioni lente).
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
Ognuna delle diverse parti mobili di questa animazione utilizza tecniche simili. Il risultato è un'animazione complessa che viene eseguita senza problemi.
Circolo pulsante
Visualizza cerchio pulsante su CodePen
Questo tipo di animazione viene talvolta utilizzato per attirare l'attenzione su un elemento della pagina. Per comprendere l'animazione, puoi utilizzare Firefox DevTools.
Ispezionare l'animazione con Firefox DevTools
Con l'animazione in esecuzione, apri la scheda Prestazioni in Firefox DevTools e registra alcuni secondi dell'animazione. Se interrompi la registrazione, nella struttura a cascata dovresti vedere che non esistono voci per Ricalcola stile. Sai che questa animazione non comporta un ricalcolo dello stile e, di conseguenza, operazioni di layout e colorazione.
Se rimani in Firefox DevTools, ispeziona il cerchio per vedere come funziona l'animazione.
La <div> con classe pulsating-circle contrassegna la posizione del cerchio, ma non disegna un cerchio stesso.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Il cerchio visibile e le animazioni vengono ottenute utilizzando gli pseudo-elementi ::before e ::after.
L'elemento ::before crea l'anello opaco che si estende al di fuori del cerchio bianco, utilizzando un'animazione chiamata pulse-ring, che anima transform: scale e opacity.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
Un altro modo per vedere quali proprietà vengono animate è selezionare il riquadro Animazioni in Firefox DevTools. Vedrai quindi una visualizzazione delle animazioni in uso e delle relative proprietà.
Il cerchio bianco stesso viene creato e animato utilizzando lo pseudo-elemento ::after.
L'animazione pulse-dot utilizza transform: scale per aumentare e ridurre il punto durante l'animazione.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
Un'animazione come questa potrebbe essere utilizzata in vari punti dell'applicazione; è importante che questi piccoli tocchi non influiscano sul rendimento complessivo dell'app.
Sfera 3D CSS pura
Visualizza la sfera 3D CSS pura su CodePen
Questa animazione sembra incredibilmente complicata, ma utilizza tecniche che abbiamo già visto negli esempi precedenti. La complessità deriva dall'animazione di un gran numero di elementi.
Apri Chrome DevTools e seleziona uno degli elementi con una classe plane.
La sfera è composta da un insieme di piani rotanti e raggi.
Questi piani e spoke si trovano all'interno di un wrapper <div>,
che è questo elemento che ruota utilizzando transform: rotate3d.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
I punti sono nidificati all'interno degli elementi plane e spoke e utilizzano un'animazione che utilizza la trasformazione per ridimensionarli e tradurli.
Questo crea l'effetto lampeggiante.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
Il lavoro necessario per creare questa animazione è stato quello di garantire il giusto tempismo, per creare effetti di rotazione e pulsazione. Le animazioni in sé sono piuttosto semplici e utilizzano metodi molto efficaci.
Per conoscere le prestazioni dell'animazione, apri Chrome DevTools e registra le prestazioni mentre è in esecuzione. Dopo il caricamento iniziale, l'animazione non attiva Layout o Paint e funziona senza problemi.
Conclusione
Da questi esempi, puoi vedere come l'animazione di alcune proprietà con metodi efficaci possa creare animazioni davvero interessanti. Impostando i metodi ad alte prestazioni descritti nella guida alle animazioni, puoi dedicare tutto il tuo tempo alla creazione dell'effetto desiderato, senza preoccuparti di rallentare la pagina.