In questo post scoprirai come sono state create alcune animazioni popolari disponibili su CodePen. Queste animazioni utilizzano tutte le tecniche ad alte prestazioni illustrate in altri articoli di questa sezione.
Consulta la sezione Perché alcune animazioni sono lente? per conoscere la teoria alla base questi consigli e la Guida alle animazioni per suggerimenti pratici.
Caricamento animazione guidata
Vedi l'animazione di caricamento della procedura guidata su CodePen
Questa animazione di caricamento è stata creata interamente con CSS. L'immagine e tutta l'animazione sono state create in CSS e HTML. senza immagini o JavaScript. Per capire com'è stato creato e le sue prestazioni, puoi utilizzare Chrome DevTools.
Esamina 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 dovrebbe essere visualizzato che il browser non sta eseguendo operazioni di layout o colorazione quando viene eseguita l'animazione.
Per scoprire come è stata realizzata questa animazione senza generare layout e colorazione, controllare uno degli elementi in movimento di Chrome DevTools. Puoi utilizzare il riquadro Animazioni per individuare i vari elementi animati, se fai clic su un elemento, questo viene evidenziato nel DOM.
Ad esempio, seleziona il triangolo, e osserva come la scatola dell'elemento si trasforma durante il suo viaggio nell'aria, ruotando, poi torna alla posizione iniziale.
Con l'elemento ancora selezionato, guarda il riquadro Stili. Qui puoi vedere il CSS che disegna la forma del triangolo, e dell'animazione utilizzata.
Come funziona
Il triangolo viene creato utilizzando lo pseudo-elemento ::after per aggiungere contenuti generati.
usando 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;
Se rimani in Chrome DevTools, puoi trovare i fotogrammi chiave scorrendo verso il basso nel riquadro Stile.
Qui scoprirai che l'animazione viene creata utilizzando transform per modificare la posizione dell'elemento e ruotarlo.
La proprietà transform è una delle proprietà descritte nella Guida alle animazioni,
che non comporta l'esecuzione di operazioni di layout o colorazione da parte del browser (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.
Cerchio pulsante
Vedi il cerchio pulsante su CodePen
Questo tipo di animazione viene talvolta utilizzato per attirare l'attenzione su elementi presenti nella pagina. Per comprendere l'animazione puoi utilizzare Firefox DevTools.
Esamina l'animazione con Firefox DevTools
Con l'animazione in esecuzione, apri la scheda Prestazioni in Firefox DevTools e registra alcuni secondi dell'animazione. Interrompi la registrazione, Nella struttura a cascata dovresti vedere che non sono presenti voci per Ricalcola stile. Sai che questa animazione non causa ricalcolo dello stile, e quindi le operazioni di layout e colorazione.
Se rimani in Firefox DevTools, controlla il cerchio per vedere come funziona l'animazione.
<div> con classe pulsating-circle indica la posizione del cerchio,
ma non traccia un cerchio.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Il cerchio visibile e le animazioni vengono ottenuti utilizzando gli pseudo-elementi ::before e ::after.
L'elemento ::before crea l'anello opaco che si estende fuori dal 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 poi una visualizzazione delle animazioni utilizzate, e le proprietà che vengono animate.
Il cerchio bianco 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 può essere usata in vari punti dell'applicazione, è importante che questi piccoli tocchi non influiscano sulle prestazioni generali dell'app.
Sfera 3D CSS pura
Visualizza tutta la sfera 3D CSS su CodePen
Questa animazione sembra estremamente complicata, ma utilizza tecniche che abbiamo già visto negli esempi precedenti. La complessità deriva dall'animazione di un elevato numero di elementi.
Apri Chrome DevTools e seleziona uno degli elementi con una classe plane.
La sfera è costituita da un insieme di piani rotanti e raggi.
Questi piani e spoke si trovano all'interno di un wrapper <div>,
che ruota usando 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.
usano un'animazione che utilizza la funzione transform per scalarla e tradurla.
Viene così creato un 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);
}
}
La creazione di questa animazione si è rivelata una scelta perfetta per creare l'effetto di rotazione e impulso. Le animazioni di per sé sono piuttosto semplici, e utilizzare metodi che funzionano molto bene.
Puoi vedere il rendimento di questa animazione aprendo Chrome DevTools e registrando 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à utilizzando metodi ad alte prestazioni possa creare animazioni molto interessanti. Per impostazione predefinita, vengono applicati i metodi con prestazioni descritti nella Guida alle animazioni puoi dedicare il tuo tempo a creare l'effetto desiderato, senza preoccuparti di rallentare la pagina.