Che cos'è la proprietà della direzione dell'animazione CSS: tutto ciò che devi sapere

Cosa pensi che i CSS siano usati solo per creare animazioni? In effetti lo è, ma insieme ad esso, puoi anche utilizzare i CSS per controllare la velocità, la durata, la direzione, l'ora di inizio, ecc.

Non importa se desideri che la tua animazione si muova verso l'alto o verso il basso, la proprietà CSS animation-direction nello sviluppo web ti consentirà di raggiungere i tuoi obiettivi.

Sei nuovo a questo? Non devi preoccuparti! In questo blog imparerai tutto sulle proprietà di animazione CSS.

Ora, senza ulteriori indugi, capiamo di cosa tratta l'animazione CSS, insieme al suo utilizzo.

Che cos'è la proprietà di direzione dell'animazione CSS?

La proprietà della direzione dell'animazione CSS riguarda la direzione dell'animazione. Una volta impostata questa proprietà, è possibile impostare facilmente il ciclo di animazione indietro, avanti o in una direzione alternativa.

Ora, diamo un'occhiata alle diverse direzioni di animazione:

• direzione dell'animazione: normale;
• direzione dell'animazione: retromarcia;
• direzione-animazione: alternata-reverse;
• direzione dell'animazione: alternativa;

Per aiutarti ulteriormente, ho condiviso la sintassi della proprietà della direzione dell'animazione. Si spera che questa sintassi ti aiuti a creare animazioni come un professionista.

/* L'animazione singola della proprietà di animazione CSS */

• direzione dell'animazione: normale;
• direzione dell'animazione: retromarcia;
• direzione dell'animazione: alternativa;
• direzione-animazione: alternata-reverse;

/* Le animazioni multiple della proprietà di animazione CSS */

• direzione dell'animazione: normale, inversa;
• direzione dell'animazione: alternata, inversa, normale;

/* I valori globali della proprietà di animazione CSS */

• direzione-animazione: eredita;
• direzione-animazione: iniziale;
• direzione dell'animazione: ripristino;
• direzione-animazione: unset;

Ora che conosci diverse proprietà di animazione CSS, è tempo di comprendere i valori delle proprietà di animazione CSS.

Proprietà CSS Animazione Valori

Normale

Se si utilizza questa proprietà, l'animazione verrà riprodotta in avanti. Significa che per ogni ciclo di animazione, l'animazione verrà ripristinata allo stato iniziale e ricomincerà.

Il valore -" Normale" è fondamentalmente il valore predefinito della proprietà di direzione dell'animazione nei CSS. Quindi, se non imposti questa proprietà, per impostazione predefinita, verrà riprodotta in avanti.

Inversione

L'animazione inversa riguarda le animazioni che vengono eseguite nella direzione inversa ad ogni ciclo. In questo stile, i passaggi di animazione e le funzioni di temporizzazione vengono eseguiti all'indietro.

Ad esempio, una funzione di temporizzazione di allentamento diventa allentamento.

Alternato

L'animazione alternativa inverte la direzione in ogni ciclo, con la prima iterazione nella direzione in avanti . Il conteggio serve a determinare se un ciclo è pari o dispari inizia da uno.

Alternato-rovescio

L'alternanza inversa inverte la direzione di ogni ciclo, con la prima iterazione riprodotta all'indietro . Il conteggio serve a determinare se un ciclo è pari o dispari, a partire da uno.

CSS Abbreviazione per la direzione dell'animazione

Sarai sorpreso di sapere che puoi anche impostare varie proprietà di animazione, inclusa la direzione dell'animazione, che può essere eseguita utilizzando la proprietà CSS della scorciatoia di animazione.

La proprietà scorciatoia di animazione CSS applica l'animazione tra gli stili. È un metodo abbreviato per impostare tutte le proprietà dell'animazione come il nome dell'animazione, la durata dell'animazione, la funzione di temporizzazione dell'animazione, il ritardo dell'animazione, il conteggio delle iterazioni dell'animazione, la direzione dell'animazione, la modalità di riempimento dell'animazione e la riproduzione dell'animazione- stato.

Problemi comuni di animazione CSS

Se la tua animazione non funziona come desideri o semplicemente non funziona affatto, ecco alcuni motivi per i problemi e come risolverli:

Nessuna regola @keyframes

Nelle animazioni CSS, la regola @keyframes definisce l'aspetto dell'animazione. Più specificamente, definisce quali stili degli elementi cambiano e quando. Senza questa regola, il tuo elemento non avrà alcuna animazione da utilizzare. Quindi la prossima volta, controlla se la tua regola @keyframes esiste e se il suo nome corrisponde a quello del nome dell'animazione per l'elemento di destinazione.

Durata animazione non impostata

Supponiamo che tu abbia assegnato una regola per i fotogrammi chiave all'elemento, ma non sembra ancora essere riprodotto se non hai impostato una durata dell'animazione. Per impostazione predefinita, il ciclo di animazione CSS è lungo zero secondi.

Per ignorare questo ciclo, devi incorporare una regola di durata dell'animazione nell'elemento di destinazione con un valore in secondi, proprio come nello stesso blocco del nome dell'animazione.

L'animazione inizia troppo presto

A volte potrebbe essere necessario prevedere un rapido rinvio prima dell'inizio dell'animazione per un'esperienza utente più elevata. Compi questo con l'animazione-rimanda gli effetti personali.

Proprietà CSS non animabili

Un altro motivo per cui l'animazione non funziona potrebbe essere che stai cercando di animare una proprietà CSS che non è animabile.

L'animazione CSS non è supportata

Disegni di animazioni CSS sui massimi browser mobili e computer odierni. Tuttavia, le tue animazioni non funzioneranno se stai utilizzando un browser più vecchio o un modello del tuo browser che non è aggiornato da molti anni, senza dubbio a causa della perdita dell'assistenza del browser.

Se hai aggiornato il browser e riscontri comunque problemi, prova a includere ulteriormente le tue politiche di animazione con i prefissi dei fornitori nelle tue politiche autentiche e riprova l'animazione.

CSS Stenografia scritta in modo errato

La scorciatoia CSS è un modo eccellente per annotare CSS di pulizia e ridurre la quantità di codice nel file. Gli effetti personali dell'animazione sono una scorciatoia per quelle case CSS:

• periodo di animazione
• animazione-chiamata
• animazione-rinvio
• animazione-direzione
• modalità di riempimento dell'animazione
• animazione-iterazione-basata
• animazione-play-nazione
• Funzione di temporizzazione dell'animazione

Sono richiesti due valori, uno per il periodo di animazione e uno per la chiamata di animazione. Oltre a questi, l'ordine dei valori determina quale prezzo è assegnato a quali effetti di animazione.

I valori disallineati dovrebbero causare un'animazione che si comporta in modo diverso da quello che ti aspetti. Quindi, se l'utilizzo della scorciatoia di animazione appartiene, assicurati che i suoi valori siano indicizzati all'interno dell'ordine corretto.

Prestazioni lente

Le animazioni CSS hanno la tendenza ad essere più elevate per le prestazioni complessive rispetto a diversi tipi di animazioni Internet. Tuttavia, ora non tutte le animazioni CSS sono più uguali e alcuni modelli vivaci ridurranno gradualmente le prestazioni complessive più di altri.

Le animazioni CSS più semplici semplicemente non hanno alcun effetto importante sui tempi di caricamento delle pagine web. Tuttavia, maggiori sono i risultati che carichi nella tua animazione, più è probabile che incappi in problemi di prestazioni complessive.

Per evitare prestazioni complessive scadenti, Google consiglia di limitare l'uso di animazioni che causano ridisegni. Una vernice è mentre il browser crea lo spettacolo visibile di un pixel di una pagina Web Internet con l'aiuto dell'utilizzo di pixel sullo schermo. Le vernici utilizzano una quantità notevole di potenza di elaborazione, quindi è necessario limitare il più possibile l'ampia varietà di ridipinture a causa delle animazioni.

Sfortunatamente, le case CSS animabili massime causano una riverniciatura mentre vengono modificate. Le eccezioni a questa trasformazione (per cose come scala, rotazione e posizione) e opacità, che possono essere vivaci con un impatto minimo sulle prestazioni complessive. Ecco un riferimento per il quale le case CSS causano ridipinture mentre sono vivaci.

Tuttavia, non permettere che ciò ti dissuada dall'eliminare del tutto le animazioni. Se hai problemi di ritmo, è probabilmente dovuto al fatto che stai cercando di eseguirne molti subito o utilizzando l'animazione per almeno un dettaglio enorme o l'organizzazione degli elementi.

Sui siti Web, le animazioni CSS sono di prim'ordine mentre vengono utilizzate in modo sottile per abbellire l'esperienza, quindi ricorda se desideri o meno che un'animazione complessa interagisca con i visitatori.

L'ultima parola

Sì, HubSpot ti consente di controllare la direzione delle animazioni utilizzando il codice CSS corretto. Bene! Sono totalmente d'accordo sul fatto che la proprietà della direzione dell'animazione CSS sia una cosa di cui molte persone non sono a conoscenza.

Ma sì, dopo aver letto questo blog, avrai sicuramente familiarità con i modi con cui puoi controllare le animazioni e dare un aspetto accattivante e facile da usare al design del tuo sito web. Allora, cosa stai aspettando? Preparati a creare un design che attiri il tuo pubblico di destinazione.

Hai ancora bisogno di aiuto nella progettazione di un sito, non esitare a contattarci. I nostri esperti ti aiuteranno con lo stesso.

Editore: Divya