Animazione CSS: esempi e illustrazioni

Il design del sito ha sempre incluso il visibile e l'invisibile. Il primo è stato implementato dal layout HTML / CSS, il secondo da JavaScript (lato client). Scegliere un rapporto ragionevole significa scegliere il momento ottimale per l'avvio di una risorsa Web in funzione.

Nello spazio Internet di informazioni moderne, il tempo è essenziale e il tempo per lo sviluppo di un sito Web lo è ancora di più. In effetti, una risorsa Internet è un'idea che è più o meno chiara e formalizzata inizialmente. Cura dello sviluppatore: il più rapidamente possibile per tradurlo in realtà virtuale. Anche nei casi in cui il processo di sviluppo è associato al perfezionamento dell'idea o del compito tecnico, la creazione della parte visibile può essere eseguita nella maggior parte dei casi contemporaneamente.

Funzionalità delle regole CSS

L'animazione non è tanto una pratica comune quanto un'esigenza urgente. Se prima la funzionalità delle risorse era importante, oggi dovrebbe essere progettata correttamente. Le pagine statiche non soddisfano nessuno, il visitatore dovrebbe sentire che il sito percepisce le sue azioni e reagisce adeguatamente a loro.

Ci sono molte opportunità e opzioni per rivitalizzare le pagine del sito, e non è affatto necessario spendere tempo a sviluppare il proprio codice univoco, di norma, questo comporta sempre JavaScript (browser, lato client). Il coinvolgimento del lato server (PHP, Perl, altre piattaforme) è meno importante, anche se a seconda delle specifiche dell'attività, è possibile eseguire l'animazione a distanza, cioè dal server.

CSS Animation è la soluzione migliore quando devi realizzare un progetto in modo rapido, efficiente e moderno con un tempo minimo:

Questa illustrazione mostra quanto sia facile implementare l'animazione con semplici regole CSS.

Sintassi generale della regola di animazione

La regola di animazione è solo cinque (sette) posizioni: * -name, * -duration, * -timing-function, * -delay, * -iteration-count, * -direction, * -play-state; dove * è il nome della regola - animazione con o senza prefisso del browser.

L'utilizzo della regola è molto semplice. Di solito usa una singola riga, separando i valori con uno spazio, indicandoli nell'ordine sopra elencato. Per fedeltà, è possibile impostare l'elemento regola per elemento. Se necessario, specificare il prefisso del browser. In ogni caso, l'animazione per la compatibilità tra browser e le prestazioni generali dovrebbe essere testata correttamente.

Prima di pianificare l'utilizzo dell'animazione, dovresti considerare la possibilità di applicare altre regole e idee più semplici: transizione, trasformazione, gif regolare, ecc.

L'animazione è una buona regola, ma per svilupparla devi ancora pianificare una sequenza di fotogrammi e, se ce ne sono molti, non sarà troppo buono per il browser e per lo sviluppatore la richiesta del cliente di cambiare qualcosa richiederà del tempo.

@keyframes - frame di animazione

Prima di tutto, va notato che l'animazione qui è composta da frame indicati dalla sequenza: from, 10%, 20%, ... 80%, to. Qui da e per sono i punti di partenza e di arrivo, e tra questi puoi manipolare i numeri con qualsiasi passaggio, ovviamente, in una quantità ragionevole e limiti ragionevoli.

In questo caso, @keyframes opacity {...} indirizza l'animazione alla proprietà opacity, che, come sai, è responsabile della trasparenza dei contenuti del tag. C'è un punto interessante: ogni fotogramma dell'animazione cambia il valore di questa proprietà, ma può anche cambiare i valori di altre proprietà dello stile a cui è applicato:

I primi due passaggi dell'animazione sono mostrati qui: da e il 10%, il resto è fatto allo stesso modo. Il primo passo sono i valori originali delle regole che sono rilevanti per questa animazione, tutti quelli successivi contengono i valori modificati di queste regole.

Animazione CSS: sintassi specifica

La regola di animazione include le posizioni principali:

• notazione (nome della regola opzionale);
• la durata di un ciclo;
• funzione temporanea (lineare, facilità, facilità d'ingresso, disinvoltura, facilità-in-out, n-out, cubico-bezier);
• ritardare l'inizio del processo;
• numero di iterazioni.

Queste posizioni sono sufficienti per ottenere un effetto sorprendente.

È importante tenere presente che qualsiasi animazione CSS non è una sintassi. Questa è l'immaginazione dello sviluppatore basata sulle idee del cliente o senza di loro.

Dovrebbe essere a conoscenza (nello sviluppo del personale): stiamo parlando del "fumetto" disegnato, tutti lo hanno mai fatto sulle pagine del libro, disegnando negli angoli delle figure, spostando o cambiando qualcosa su ciascuno dei prossimi. Scorrendo rapidamente l'angolo, puoi vedere il movimento.

Gli svantaggi dell'animazione "disegnata a mano"

Proprio come nella realtà, l'animazione disegnata sugli angoli delle foglie di un libro richiede un altro (vuoto) libro da modificare, quindi nel caso dell'animazione CSS, dovrai ripetere la sequenza e il contenuto dei fotogrammi quando qualcosa deve essere cambiato.

Per questa semplice ragione, non si dovrebbe essere coinvolti nella molteplicità delle regole di ogni passo, utilizzare la possibilità di combinare l'una o l'altra regola per tappa. Tutto dovrebbe sempre essere semplicemente inventato e ancora più semplicemente scritto.

È importante capire: lo scopo del CSS è fornire una serie di semplici regole per il design della pagina. Meno regole vengono utilizzate per ogni identificatore o classe, meno identificatori e classi vengono creati, meglio è.

L'animazione CSS è sempre un lavoro manuale. Anche quando si utilizza un sistema di gestione dei siti, l'aggiunta di un sito con un elemento animato significa che è legata alle specifiche dell'area dell'applicazione, se non si tratta di pulsanti, menu o implementazione di altre tradizioni.

Creando una "bellezza" sulla pagina, è sempre opportuno tenere presente che sarà necessario modificarlo.

Punti e forme dell'applicazione di animazione

на логотип компании - отличное решение. L'animazione CSS quando si punta a un logo aziendale è un'ottima soluzione. Questo non solo funziona sempre, ma l'ospite è sempre in attesa, soprattutto per la prima volta che visita la risorsa. Una nuova persona, un nuovo look, una nuova opinione: la psicologia del visitatore è la sua risorsa più significativa.

Utilizzando un'animazione semplice, ma originale, del logo aziendale e delle descrizioni delle sue posizioni principali nel business (beni, servizi, metodi di fornitura, promozioni, sconti, ecc.), Puoi attirare subito un nuovo cliente.

L'animazione del testo CSS è una buona mossa progettuale, ma dovrebbe essere utilizzata quando non è possibile applicare le normali funzionalità di layout o limitare l'immaginazione. Ad esempio, un tag di selezione con un set di regole CSS.

Il movimento del testo sullo schermo (inclusa un'altra versione della sua animazione) è un'idea vecchia e pratica, ma dipende in modo significativo dall'ambito del sito. Se non è necessario, è meglio non ricordarlo oggi.

Aspetto L'animazione CSS è l'idea più pratica, semplice e psicologicamente ricercata. Se non parli di soluzioni originali, quando il movimento del mouse può lasciare un segno nella finestra del browser (tag + pseudo-classe: hover), quindi l'opzione classica per evidenziare il prodotto selezionato dal cliente, mostrare il prodotto in lavorazione ... è una buona soluzione.

L'aspetto regolare degli elementi della pagina non è così tanto, ma è diventato popolare a causa della tendenza generale del dinamismo del settore dell'edilizia del sito nel suo insieme. La tecnologia AJAX rende le pagine dinamiche. Il contenuto non è completamente caricato, ma viene fornito in alcune parti del browser del visitatore. Una buona ragione per usare l'effetto di manifestazione.

Pulsante di animazione. I CSS sono fatti apposta per questo. Non c'era ancora un programmatore e, in generale, nemmeno uno sviluppatore PHP o JavaScript (specializzazioni molto lontane dalle regole CSS) che non avrebbero impiegato un paio di giorni a creare il proprio capolavoro con segni di animazione, o un elemento su cui un classico , ma ancora toccando Hello world, sono un pulsante!

Il tema dei pulsanti è decisamente interessante. Tuttavia, la diffusa proliferazione di dispositivi mobili e di altri dispositivi a cui non è ancora possibile connettere un mouse, suggerisce di animare il tema del pulsante all'interno dell'intelligenza pratica.

Il miglior ambito di animazione CSS è ancora il seguente: il nome e l'ambito della società, i suoi servizi, prodotti e posizione in relazione al cliente.