5 Suggerimenti e trucchi per l'animazione CSS che dovresti conoscere

Le animazioni e le transizioni sono una parte importante del web design. L'aggiunta di animazioni sottili alla tua pagina web la renderà più coinvolgente. Animazioni semplici come icone animate, tipografia cinetica e loghi animati possono aiutare a migliorare l'esperienza dell'utente. Scopri cinque fantastici trucchi di animazione che possono aiutarti a ravvivare il tuo sito web.

1. Trasformare un elemento al passaggio del mouse

Una pratica di progettazione comune consiste nell'avere un elemento che si ingrandisce quando si interagisce. Ad esempio, potresti voler spostare i pulsanti un po' verso l'alto quando qualcuno ci passa sopra con il mouse. Puoi ottenere questo risultato usando il CSS trasformare proprietà.

Supponendo di avere un pulsante:

<pulsante>
 Cliccami
pulsante>

Hai disegnato il corpo del documento e il pulsante:

/* Allinea il pulsante al centro della pagina */
corpo {
Schermo: flettere;
altezza: 100vh





instagram viewer
;
align-elementi: centro;
giustificare il contenuto: centro;
colore di sfondo: nero;
}
/* Applica uno stile al pulsante */
pulsante {
imbottitura: 1em 2em;
sfondo: blu;
confine: 0; 
colore: bianco;
bordo-raggio: 0.25rim;
cursore: puntatore;
dimensione del font: 2rem;
transizione: trasformare 500SM;
}
/* Stati al passaggio del mouse */
pulsante: al passaggio del mouse,
pulsante:messa a fuoco {
trasformare: tradurreY(0.75rim) 500SM;
}

Con l'ultimo blocco, stai impostando gli stati di passaggio del mouse e focus sul pulsante. In entrambi gli stati, trasla il pulsante lungo l'asse Y di 0,75 rem. Il pulsante sarebbe simile a questo:

Quando passi il mouse sul pulsante, questo scorre verso l'alto. La transizione richiede mezzo secondo (500 ms) per essere completata. Questo è un modello che puoi implementare non solo sui tuoi pulsanti, ma anche su altri elementi (ad esempio immagini).

2. Dichiarazione di più fotogrammi chiave con una dichiarazione

Un altro modello comune nelle animazioni CSS è l'iterazione sullo stesso valore più volte. Questo potrebbe essere un colore, una dimensione o un orientamento specifici. Puoi raggiungere questo obiettivo utilizzando Animazioni di fotogrammi chiave CSS dichiarando più fotogrammi chiave con una sola dichiarazione.

Considera il pulsante che hai creato nella sezione precedente. Forse vuoi iterare su diversi colori di sfondo quando fai clic sul pulsante. Ma vuoi anche ripassare lo stesso colore in diverse fasi dell'animazione. Vediamo come ottenerlo nel codice.

Innanzitutto, vuoi animare il pulsante solo quando viene cliccato. Quindi creeresti un file script.js file, all'interno del quale si accede al pulsante e si attiva una classe sul pulsante quando viene fatto clic:

cost pulsante = documento.querySelector("pulsante")
button.addEventListener("clic", (e) => {
 button.classList.toggle('tempo di festa')
})

Abbiamo usato querySelector per accedere al pulsante dalla pagina web. Per saperne di più sull'attraversamento DOM, leggi il nostro post su come attraversare il DOM utilizzando JavaScript.

IL tempo di festa la classe attiva un'animazione intitolata festa:

.tempo di festa {
animazione: festa 2000SMinfinito;
}

Per l'animazione, vuoi iniziare con il rosso e passare al giallo al 25%. Quindi torneresti al rosso al 50% prima di tornare al giallo al 75%. Infine, al 100%, ti accontenterai di un colore blu scuro:

@keyframe festa {
 0%, 50% {
colore di sfondo: rosso;
 } 
 25%, 75% {
colore di sfondo: giallo;
 }
 100% {
colore di sfondo: hsl(200, 72%, 35%);
 }
}

Questo approccio è molto utile per alternare i colori su uno sfondo a colori. Poiché puoi ripetere più fotogrammi chiave in una variabile, diventa semplicissimo utilizzare la stessa proprietà in diverse fasi dell'animazione.

3. Utilizzo di @property per animare le proprietà personalizzate

Come forse già saprai, non tutte le proprietà nei CSS sono animabili. L'ufficiale Documentazione di Mozilla mantiene un registro aggiornato di tutte le proprietà CSS animabili. Se stai cercando di animare una proprietà non animabile, la soluzione migliore sarebbe utilizzare il @proprietà direttiva.

Inizia cambiando il colore di sfondo del pulsante in un gradiente lineare:

pulsante {
 // altroCSS
sfondo: gradiente lineare(90gradi, blu, verde);
 // altroCSS
}

Ecco l'output:

Spesso vorresti animare il gradiente di colore sul pulsante. Mentre ci sono trucchi che puoi usare per spostare il tuo gradiente, non puoi effettivamente animarlo. Questo è perché sfondo (così come immagine di sfondo) non è una proprietà animabile. Qui è dove @proprietà entra.

IL @proprietà La direttiva consente di registrare proprietà personalizzate. Quando usi @proprietà, devi fornirgli tre valori, vale a dire sintassi, eredita, E valore iniziale:

@proprietà --colore-1 {
sintassi: "<colore>";
eredita: VERO;
valore iniziale: rosso;
}
@proprietà --colore-2 {
sintassi: "<colore>";
eredita: VERO;
valore iniziale: blu;
}

La prima è la proprietà di partenza mentre la seconda è la proprietà di destinazione. Ora, invece di eseguire la transizione di un'immagine di sfondo (da cui non è possibile eseguire la transizione), eseguiresti la transizione da --colore-1 A --colore-2 (le tue proprietà personalizzate) in un secondo:

pulsante {
transizione: --colore-1 1000SM, --colore-2 1000SM;
}

Questa tecnica è utile perché puoi anche aggiungere altre personalizzazioni. Ad esempio, aggiungi un ritardo per dargli un'esperienza più fluida. Le possibilità sono infinite.

4. Utilizzo di ritardi di animazione negativi

I ritardi di animazione sono fondamentali per creare animazioni fluide. Vediamo un esempio in azione. In questa parte, aggiungi a div elemento con 15 punti sopra il pulsante:

<divclasse="punti">
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
<divclasse="punto">div>
div>

Ecco alcuni stili di base per trasformare ogni bambino div in un punto:

.punti {
Schermo: flettere;
spacco: .5rim;
margine inferiore: 20px;
}
.punto {
larghezza: 10px;
proporzioni: 1;
colore di sfondo: rosso;
bordo-raggio: 50%;
}

Qui usiamo Flexbox per posizionare i punti in una linea orizzontale. Per immergerti in profondità in Flexbox, puoi controllare il nostro Esercitazione su CSS FlexBox.

Dentro script.js, aggiungi il codice che attiva l'animazione dei punti. Stai attivando il danza classe sui punti:

button.addEventListener("clic", (e) => {
 button.classList.toggle('tempo di festa')
// Nuovo codice
 punti.perOgni((punto) => {
 dot.classList.toggle('danza')
 })
})

La lezione di danza attiva un'animazione intitolata salita:

.punto.danza {
animazione: salita 2000SMinfinitoalternato;
}

Per quanto riguarda l'animazione, traduci semplicemente i punti -100px lungo l'asse Y:

@keyframe salita {
 100% {
trasformare: tradurreY(-100 pixel)
 }
}

Ora è il momento di fare qualcosa di interessante. Invece dei punti che si alzano contemporaneamente, vuoi animare i punti in modo che scorrano come un'onda. Per raggiungere questo obiettivo, devi aggiungere ritardo di animazione ai punti e incrementa ogni punto di 100 ms:

.punto:ennesimo figlio (1) {
ritardo di animazione: 100SM;
}
.punto:ennesimo figlio (2) {
ritardo di animazione: 200SM;
}
.punto:ennesimo figlio (3) {
ritardo di animazione: 300SM;
}
.punto:ennesimo figlio (4) {
ritardo di animazione: 400SM;
}
/* Continua così finché non raggiungi il 15° punto */

Questo crea un'animazione elegante in cui i punti si muovono su e giù in una forma ondulata. L'immagine seguente cattura i punti al centro dell'animazione:

Tieni presente che questo può essere problematico, il che ci porta al quinto suggerimento.

5. Utilizzare preferisce-movimento ridotto per abilitare le preferenze

Tieni sempre presente che a molte persone non piacciono le animazioni basate sul movimento. In effetti, la maggior parte degli utenti ha preferenze nel browser che possono disattivare il movimento. Il movimento può distrarre i sensi e, nei casi più gravi, portare a nausea.

Fortunatamente, puoi occupartene facilmente avvolgendo la tua animazione all'interno di un file Nessuna preferenza media query in questo modo:

@media(preferisce-movimento-ridotto: nessuna-preferenza) {
.punto.danza {
animazione: salita 2000SMinfinitoalternato;
 }
}

Ora, se dovessi abilitare preferisce-movimento-ridotto nel tuo browser, l'animazione non verrebbe eseguita.

Ulteriori informazioni Suggerimenti e trucchi CSS

I CSS sono pieni di fantastici hack che vanno oltre le animazioni e le transizioni. Ad esempio, ci sono suggerimenti e trucchi per rendere l'intero layout elegante e reattivo. Le pratiche possono aiutarti a rendere il tuo sito web più coinvolgente, accessibile e piacevole da navigare. Se vuoi essere uno sviluppatore CSS al top dell'1%, allora avere un paio di assi nella manica aiuta molto.