Animazione CSS per i più piccoli. Esempi CSS di animazione e codice pronto Tipi di animazione CSS

L'abbiamo visto di recente transizioniè solo un modo animazioni proprietà di stile da l'originale prima il finale stati.

Quindi le transizioni in CSS sono specifica dal tipo di animazione, dove:

ci sono solo due stati: inizio e fine;
l'animazione non è in loop;
gli stati intermedi sono controllati solo dalla funzione del tempo.

Ma cosa succede se vuoi:

avere il controllo su intermedio stati?
fare il ciclo animazione?
creare diversi tipi di animazioni per uno articolo?
animare una proprietà specifica solo su metà di la via?
imitare varie funzioni di tempo per proprietà diverse?

L'animazione in CSS consente tutto questo e altro ancora.

L'animazione è come un mini-film in cui tu, come regista, dai istruzioni (regole di stile) ai tuoi attori (elementi HTML) per scene diverse (fotogrammi chiave).

Proprietà di animazione

Come la transizione, la proprietà di animazione è abbreviato per pochi altri:

nome-animazione: il nome dell'animazione;
animazione-durata: quanto dura l'animazione;
animazione-timing-function: come vengono calcolati gli stati intermedi;
animazione-ritardo: l'animazione inizia dopo un po' di tempo;
conteggio-iterazione-animazione: quante volte deve essere eseguita l'animazione;
animazione-direzione: il movimento deve andare nella direzione opposta o no;
animation-fill-mode: quali stili vengono applicati prima che l'animazione inizi e dopo che finisce.

Esempio veloce

Per animare il pulsante di download, puoi scrivere un'animazione rimbalzando:

@keyframes che rimbalzano (0% (bottom: 0; box-shadow: 0 0 5px rgba (0,0,0,0.5);) 100% (bottom: 50px; box-shadow: 0 50px 50px rgba (0,0, 0,0.1);)) .loading-button (animazione: rimbalzare 0.5s cubic-bezier (0.1,0.25,0.1,1) 0s infiniti alternati entrambi;)

Per prima cosa devi scrivere una vera animazione di rimbalzo usando @keyframes e nominarla.

ero solito abbreviato proprietà di animazione e includeva tutte le opzioni possibili:

nome-animazione: rimbalzo (corrisponde al nome dei fotogrammi chiave)
durata dell'animazione: 0,5 secondi (mezzo secondo)
funzione di temporizzazione dell'animazione: cubic-bezier (0.1,0.25,0.1,1)
ritardo animazione: 0s (nessun ritardo)
conteggio-iterazione-animazione: infinito (rigiocabile all'infinito)
direzione dell'animazione: alternato (va avanti e indietro)
modalità di riempimento dell'animazione: entrambi

@fotogrammi chiave

Prima di animare gli elementi HTML, è necessario scrivere animazioni usando i fotogrammi chiave... In generale, i fotogrammi chiave sono tutti passo intermedio nell'animazione. Sono determinati utilizzando percentuali:

0% - il primo passo dell'animazione;
Il 50% è un passo a metà nell'animazione;
100% è l'ultimo passo.

Puoi anche utilizzare le parole chiave da e a invece di 0% e 100%, rispettivamente.

Puoi definire tutti i fotogrammi chiave che desideri, ad esempio 33%, 4% o persino 29,86%. In pratica, ne scriverai solo alcuni.

Ogni fotogramma chiave è Regola CSS, questo significa che puoi scrivere le proprietà CSS come al solito.

Per definire l'animazione basta scrivere la parola chiave @keyframes con la sua titolo:

@keyframes intorno (0% (sinistra: 0; sopra: 0;) 25% (sinistra: 240 px; sopra: 0;) 50% (sinistra: 240 px; sopra: 140 px;) 75% (sinistra: 0; sopra: 140 px ;) 100% (sinistra: 0; sopra: 0;)) p (animazione: circa 4s infinito lineare;)

Nota che l'inizio 0% e la fine 100% contengono le stesse regole CSS. Ciò assicurerà che l'animazione si ripeta perfettamente. Poiché il contatore delle iterazioni è impostato su infinito, l'animazione passerà dallo 0% al 100%, quindi immediatamente Indietro allo 0% e così via per sempre.

nome-animazione

Nome l'animazione è usata almeno due volte:

a scrivere animazioni con @keframes;
a usando animazioni utilizzando la proprietà nome-animazione (o la proprietà di animazione abbreviata).

@keyframes qualunque (/ * ... * /) .selector (nome-animazione: qualunque;)

Come i nomi delle classi CSS, i nomi delle animazioni possono includere solo:

lettere (a-z);
numeri (0-9);
sottolineatura (_);
trattino (-).

Il nome non può iniziare con un numero o con due trattini.

durata-animazione

Come la durata della transizione, la durata dell'animazione può essere impostata su secondi(1s) o millisecondi(200 ms).

Selettore (durata dell'animazione: 0,5 s;)

Il valore predefinito è 0, il che significa nessuna animazione.

funzione di temporizzazione dell'animazione

Simile alle funzioni di temporizzazione per le transizioni, possono essere utilizzate le funzioni di temporizzazione per l'animazione parole chiave come lineare, allentamento o può essere definito con arbitrario Curve di Bezier.

Selettore (funzione di temporizzazione dell'animazione: facilità di ingresso;)

L'impostazione predefinita è facilità.

Poiché le animazioni CSS utilizzano i fotogrammi chiave, puoi impostare lineare funzione del tempo e simulare curva di Bezier specifica definendo molti molto specifici fotogrammi chiave. Dai un'occhiata a Bounce.js per animazioni all'avanguardia.

animazione-ritardo

Come per il ritardo della transizione, il ritardo dell'animazione può essere impostato su secondi(1s) o millisecondi(200 ms).

Il valore predefinito è 0, il che significa che non c'è alcun ritardo.

Utile quando sono incluse più animazioni in serie.

A, .b, .c (animazione: 1s di rimbalzo;) .b (ritardo dell'animazione: 0.25s;) .c (ritardo dell'animazione: 0.5s;)

conteggio-iterazione-animazione

Per impostazione predefinita, l'animazione viene riprodotta solo una volta(valore 1). Puoi impostare tre tipi di valori:

numeri interi, come 2 o 3;
numeri frazionari come 0,5, che riprodurranno solo metà dell'animazione;
la parola chiave infinite, che ripeterà l'animazione all'infinito.

.selector (animazione-iterazione-conteggio: infinito;)

direzione-animazione

La proprietà della direzione dell'animazione determina in quale ordine vengono letti i fotogrammi chiave.

normale: inizia allo 0%, finisce al 100%, ricomincia dallo 0%.
inverso: parte dal 100%, finisce dallo 0%, ricomincia dal 100%.
alternato: parte dallo 0%, va al 100%, ritorna allo 0%.
alternate-reverse: parte dal 100%, va allo 0%, ritorna al 100%.

Questo è più facile da immaginare se il conteggio delle iterazioni dell'animazione è impostato su infinito.

modalità di riempimento-animazione

La proprietà animation-fill-mode determina cosa succede davanti l'inizio dell'animazione e dopo il suo completamento.

Nel determinare personale chiave puoi specificare Regole CSS che verrà applicato in diversi passaggi dell'animazione. Ora queste regole CSS possono scontrarsi con quelli che già applicato agli elementi animati.

la modalità di riempimento dell'animazione ti consente di dire al browser se stili di animazione anche dovrebbe applicarsi al di fuori dell'animazione.

Immaginiamo pulsante, che è:

rosso predefinito;
diventa blu all'inizio dell'animazione;
e alla fine verde quando l'animazione è completa.

Ultimo aggiornamento: 06.11.2016

L'animazione offre grandi opportunità per cambiare lo stile di un elemento. Al momento della transizione, abbiamo un insieme di proprietà con i valori iniziali che l'elemento ha prima dell'inizio della transizione e i valori finali che vengono impostati dopo il completamento della transizione. Mentre durante l'animazione possiamo avere non solo due insiemi di valori: iniziale e finale, ma anche molti insiemi di valori intermedi.

L'animazione si basa su una modifica sequenziale dei fotogrammi chiave (fotogrammi chiave). Ogni fotogramma chiave definisce un insieme di valori per le proprietà animate. E la successiva modifica di tali fotogrammi chiave rappresenterà effettivamente l'animazione.

In effetti, le transizioni utilizzano lo stesso modello - anche due fotogrammi chiave sono definiti implicitamente - l'inizio e la fine, e la transizione stessa rappresenta la transizione dal fotogramma chiave di inizio a quello di fine. L'unica differenza con l'animazione in questo caso è che puoi definire più fotogrammi chiave intermedi per un'animazione.

In generale, una dichiarazione di fotogrammi chiave CSS3 assume la forma seguente:

@keyframes animation_name (da (/ * valori iniziali delle proprietà CSS * /) a (/ * valori finali delle proprietà CSS * /))

La parola chiave @keyframes è seguita dal nome dell'animazione. Quindi, almeno due fotogrammi chiave vengono definiti tra parentesi graffe. Il blocco dopo la parola chiave from è dichiarato un fotogramma chiave iniziale e dopo la parola chiave to nel blocco è definito il fotogramma chiave finale. All'interno di ogni fotogramma chiave vengono definite una o più proprietà CSS, proprio come viene creato uno stile normale.

Ad esempio, definiamo un'animazione per il colore di sfondo di un elemento:

Animazione in CSS3

In questo caso, l'animazione si chiama backgroundColorAnimation. L'animazione può avere un nome arbitrario.

Questa animazione fornisce una transizione dallo sfondo rosso a quello blu. E dopo la fine dell'animazione, verrà impostato il colore definito per l'elemento div.

Per collegare un'animazione a un elemento, la sua proprietà nome-animazione viene applicata nel suo stile. Il valore di questa proprietà è il nome dell'animazione da applicare.

Inoltre, utilizzando la proprietà animation-duration, è necessario impostare il tempo di animazione in secondi o millisecondi. In questo caso, il tempo di animazione è di 2 secondi.

Con questa definizione, l'animazione partirà subito dopo il caricamento della pagina. Tuttavia, puoi anche attivare animazioni in base all'azione dell'utente. Ad esempio, definendo uno stile per la pseudo-classe: hover, puoi definire l'animazione da avviare quando il mouse passa sopra un elemento:

@keyframes backgroundColorAnimation (da (colore di sfondo: rosso;) a (colore di sfondo: blu;)) div (larghezza: 100 px; altezza: 100 px; margine: 40 px 30 px; bordo: 1 px solido # 333; colore di sfondo: # ccc;) div: hover (nome-animazione: backgroundColorAnimation; durata-animazione: 2s;)

Molti fotogrammi chiave

Come accennato in precedenza, l'animazione, oltre a due fotogrammi chiave standard, consente di utilizzare molti fotogrammi intermedi. Per definire un'interpolazione, viene applicata la percentuale dell'animazione in cui deve essere utilizzata l'interpolazione:

@keyframes backgroundColorAnimation (da (colore di sfondo: rosso;) 25% (colore di sfondo: giallo;) 50% (colore di sfondo: verde;) 75% (colore di sfondo: blu;) a (colore di sfondo: viola ;))

In questo caso, l'animazione inizia con il rosso. Dopo il 25% del tempo di animazione, il colore diventa giallo, dopo un altro 25% diventa verde e così via.

Puoi anche animare più proprietà in un fotogramma chiave contemporaneamente:

@keyframes backgroundColorAnimation (da (colore di sfondo: rosso; opacità: 0.2;) a (colore di sfondo: blu; opacità: 0.9;))

Puoi anche definire più animazioni separate, ma applicarle insieme:

@keyframes backgroundColorAnimation (da (colore di sfondo: rosso;) a (colore di sfondo: blu;)) @keyframes opacityAnimation (da (opacità: 0,2;) a (opacità: 0,9;)) div (larghezza: 100 px; altezza: 100px; margine: 40px 30px; bordo: 1px solido # 333; colore di sfondo: #ccc; nome animazione: backgroundColorAnimation, opacityAnimation; durata animazione: 2s, 3s;)

Le animazioni sono elencate come valore della proprietà nome-animazione, separate da virgole, e anche l'ora di queste animazioni è impostata separata da virgole nella proprietà durata-animazione. Il nome dell'animazione e il suo tempo sono abbinati alla posizione, ovvero l'animazione opacityAnimation durerà 3 secondi.

Completamento dell'animazione

In generale, dopo la fine dell'intervallo di tempo specificato dalla proprietà animation-duration, termina anche l'animazione. Tuttavia, con l'aiuto di proprietà aggiuntive, possiamo ignorare questo comportamento.

Ad esempio, la proprietà animation-iteration-count determina quante volte si ripeterà l'animazione. Ad esempio, 3 animazioni si ripetono di seguito:

Conteggio iterazioni animazioni: 3;

Se vuoi che l'animazione venga eseguita un numero infinito di volte, a questa proprietà viene assegnato il valore infinito:

Conteggio-iterazione-animazione: infinito;

Quando ripeti, l'animazione ricomincerà dal fotogramma chiave di inizio. Ma con la direzione dell'animazione: alternato; la direzione opposta dell'animazione quando ripetuta. Cioè, inizierà dal fotogramma chiave finale e quindi ci sarà una transizione al fotogramma iniziale:

Nome animazione: backgroundColorAnimation, opacityAnimation; durata dell'animazione: 2s, 2s; conteggio-iterazione-animazione: 3; direzione dell'animazione: alternativa;

Al termine dell'animazione, il browser imposta lo stile dell'elemento animato sullo stile che avrebbe prima dell'applicazione dell'animazione. Ma la proprietà animation-fill-mode: forwards ti consente di impostare il valore finale della proprietà animata esattamente quello che era nell'ultimo fotogramma:

Nome animazione: backgroundColorAnimation; animazione-durata: 2s; conteggio-iterazione-animazione: 3; direzione dell'animazione: alternativa; modalità di riempimento dell'animazione: avanti;

Animazione ritardata

Utilizzando la proprietà animation-delay, puoi definire il tempo di ritardo dell'animazione:

Nome animazione: backgroundColorAnimation; durata dell'animazione: 5s; ritardo animazione: 1s; / * 1 secondo di ritardo * /

Funzione di fluidità dell'animazione

Come per le transizioni, puoi applicare tutte le stesse funzioni di andamento alle animazioni:

lineare: funzione di levigatezza lineare, la proprietà cambia in modo uniforme nel tempo

facilità: una funzione di facilità che accelera l'animazione verso la metà e decelera verso la fine, fornendo un cambiamento più naturale

easy-in: funzione di facilità che accelera solo in partenza

easy-out: funzione di facilità che accelera solo in partenza

easy-in-out: una funzione di facilità che accelera l'animazione verso la metà e decelera verso la fine, fornendo un cambiamento più naturale

cubic-bezier - Usa una funzione cubic bezier per l'animazione

La proprietà animation-timing-function viene utilizzata per impostare la funzione di levigatezza:

@keyframes backgroundColorAnimation (da (colore di sfondo: rosso;) a (colore di sfondo: blu;)) div (larghezza: 100 px; altezza: 100 px; margine: 40 px 30 px; bordo: 1 px solido # 333; nome animazione: backgroundColorAnimation ; durata dell'animazione: 3 secondi; funzione di temporizzazione dell'animazione: facilità di ingresso;)

Proprietà di animazione

La proprietà di animazione è un modo abbreviato per definire le proprietà di cui sopra:

Animazione: animazione-nome animazione-durata animazione-timing-funzione animazione-conteggio iterazioni animazione-direzione animazione-ritardo animazione-modalità di riempimento

I primi due parametri, che forniscono il titolo e la tempistica dell'animazione, sono obbligatori. Il resto dei valori sono facoltativi.

Prendiamo il seguente insieme di proprietà:

Nome animazione: backgroundColorAnimation; durata dell'animazione: 5s; funzione di temporizzazione dell'animazione: facilità di ingresso; conteggio-iterazione-animazione: 3; direzione dell'animazione: alternativa; ritardo animazione: 1s; modalità di riempimento dell'animazione: avanti;

Questo set sarà equivalente alla seguente definizione di animazione:

Animazione: backgroundColorAnimation 5s easy-in-out 3 1s alternati in avanti;

Creazione di un banner con animazione

Ad esempio con l'animazione, creiamo un semplice banner animato:

Banner HTML

Ci sono tre animazioni in corso contemporaneamente. L'animazione "banner" cambia il colore di sfondo del banner, mentre le animazioni testo1 e testo2 mostrano e nascondono il testo utilizzando le impostazioni di trasparenza. Quando il primo testo è visibile, il secondo non è visibile e viceversa. Quindi, otteniamo l'animazione del testo nel banner.

L'animazione CSS3 è ampiamente utilizzata. È tempo di capire anche i costruttori di siti Web più inesperti cos'è l'animazione CSS e come crearla. Potresti pensare che l'animazione CSS3 riguardi il far muovere i blocchi e sembra un cartone animato. Ma l'animazione CSS non riguarda solo lo spostamento di un elemento da un punto all'altro, ma anche distorsione e altre trasformazioni. Per chiarire anche ai principianti, ho descritto tutto per gradi.

1. Proprietà di base dell'animazione CSS3

Un piccolo blocco teorico da cui capirete quali proprietà CSS3 sono responsabili dell'animazione, nonché quali valori possono assumere.

nome-animazione- il nome univoco dell'animazione (fotogrammi chiave, ne parleremo di seguito).
durata-animazione- durata dell'animazione in secondi.
funzione di temporizzazione dell'animazione- Curva di velocità di animazione. A prima vista, è molto incomprensibile. È sempre più facile mostrarli con un esempio e li vedrai di seguito. Può assumere i seguenti valori: lineare | facilità | facilità | facilità | cubico-bezier (n, n, n, n).
animazione-ritardo- ritardo in secondi prima dell'inizio dell'animazione.
conteggio-iterazione-animazione- il numero di ripetizioni dell'animazione. È impostato semplicemente da un numero, oppure puoi specificare infinito e l'animazione verrà eseguita indefinitamente.

Ecco solo le proprietà di base, più che sufficienti per creare la tua prima animazione CSS3.

L'ultima cosa che dobbiamo sapere e capire dalla teoria è come creare i fotogrammi chiave. Anche questo è facile da fare e viene eseguito utilizzando la regola @keyframes, all'interno della quale vengono specificati i keyframe. La sintassi per questa regola è la seguente:

Sopra, impostiamo il primo e l'ultimo frame. Tutti gli stati intermedi sono calcolati AUTOMATICAMENTE!

2. Un vero esempio di animazione CSS3

La teoria è noiosa come al solito e non sempre chiara. È molto più facile vedere tutto con un esempio reale, ed è meglio farlo da soli su una pagina HTML di prova.

Quando imparano un linguaggio di programmazione, di solito scrivono un programma "Hello, world!" Ma non stiamo studiando un linguaggio di programmazione, ma un linguaggio per descrivere l'aspetto di un documento. Pertanto, avremo il nostro "Hello, world!"

Ecco cosa faremo per esempio: facciamo una sorta di blocco

inizialmente avrà una larghezza di 800 px e si ridurrà a 100 px in 5 secondi.

Tutto sembra essere chiaro: devi solo comprimere il blocco

e basta! Vediamo come appare nella realtà.

Innanzitutto il markup HTML. È molto semplice perché lavoriamo solo con un elemento per pagina.

1	<div class = "toSmallWidth">

Ed ecco cosa c'è nel foglio di stile:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (margine: 20px automatico; / * Imbottitura superiore e inferiore di 20 pixel e allineamento centrale * / fondo: rosso; /*sfondo rosso per il blocco*/ altezza: 100px; / * altezza blocco 100 px * / larghezza: 800 px; / * larghezza iniziale 800px * /-nome-animazione-webkit: animWidthSitequi; -webkit-animazione-durata: 5s; /* proprietà con prefisso per browser Chrome, Safari, Opera * / nome-animazione: animWidthSitehere; / * specificare il nome dei fotogrammi chiave (che si trovano sotto) * / durata dell'animazione: 5s; / * imposta la durata dell'animazione * / } / * fotogrammi chiave con prefisso per browser Chrome, Safari, Opera * / @ -webkit-keyframes animWidthSitequi ( da (larghezza: 800 px;) a (larghezza: 100 px;)) @keyframes animWidthSitehere ( da (larghezza: 800 px;) / * primo fotogramma chiave in cui la larghezza del blocco è 800 px * / a (larghezza: 100 px;) / * ultimo fotogramma chiave in cui la larghezza del blocco è 100 px * / }

Come puoi vedere, abbiamo specificato solo il primo e l'ultimo fotogramma chiave e tutti quelli intermedi sono stati "costruiti" automaticamente.

La tua prima animazione CSS3 è pronta. Per consolidare le conoscenze acquisite, crea un documento HTML e un file CSS, e inserisci lì (o meglio digita a mano) il codice dell'esempio. Allora capirai sicuramente tutto. Quindi prova a fare lo stesso con l'altezza del blocco (dovrebbe diminuire in altezza) per fissare il materiale.

3. Gli esempi di animazione CSS3 sono più complessi

Sopra, hai imparato quanto sia facile creare animazioni CSS3. Se hai provato a farlo con le tue mani, hai già capito l'intero processo e ora vuoi sapere come creare un'animazione più complessa e bella. Ed è davvero possibile crearlo. Di seguito ci sono 3 lezioni in cui l'animazione viene creata nello stesso modo dell'esempio sopra.

La pratica dello sviluppo di risorse web ha portato a due tendenze significative: velocità e percezione della qualità. Il primo obbliga lo sviluppatore a fare rapidamente il suo lavoro, il secondo - definisce i confini dell'espediente.

Il visitatore persegue un obiettivo specifico quando visita il sito ed è guidato da idee generalmente accettate su dove si trova e come dovrebbe funzionare. Lo sviluppatore può fare il suo lavoro come è conveniente per lui, ma se è interessato ad attirare l'attenzione di un numero maggiore di visitatori, non è opportuno ignorare la loro opinione.

Sintassi e semantica dell'animazione

La proprietà di animazione CSS è facile da usare e ti consente di creare rapidamente effetti interessanti. Non è necessario essere intelligenti e progettare le proprie animazioni per far sì che gli elementi di una pagina Web si comportino nel modo moderno che un visitatore si aspetta. Tutto funziona per definizione, come previsto e richiesto.

Questo esempio descrive due elementi. La prima è una striscia indicatrice che si sposta verso destra e aumenta proporzionalmente di dimensioni. Il secondo elemento è un'immagine che si sposta semplicemente a destra.

Non tutti i frame sono mostrati qui. La proprietà viene implementata senza problemi in questo caso. Il visitatore della pagina osserva un movimento fluido con un aumento del volume della linea e il movimento dell'immagine. Utilizzando varie opzioni di movimento invece del tipo easy-in-out, è possibile controllare il movimento. L'opzione easy-in-out fornisce accelerazione all'inizio e decelerazione alla fine, ma puoi scegliere un'altra opzione di movimento.

Sovrapposizione e interazione di elementi

Tutti gli elementi che hanno la proprietà di animazione vengono considerati dai CSS indipendentemente l'uno dall'altro e dal flusso complessivo della pagina. Se gli elementi sono sovrapposti l'uno all'altro, si ottiene una combinazione di effetti e di conseguenza un nuovo effetto.

Se nel processo di animazione gli elementi cambiano le loro proprietà, a causa delle leggi della sovrapposizione dei colori, puoi ottenere effetti molto originali con solo due o tre elementi.

Il disegno dell'elemento è di grande importanza. Nell'esempio fornito, una striscia è formata da un'immagine in cui due linee sono di colori diversi. Quando la dimensione della striscia aumenta, è una sega; quando la sega si muove, è un'onda in movimento. Manipolando le linee e la loro inclinazione, puoi creare effetti secondo le leggi generali della grafica.

La modifica del tempo di animazione porta anche a soluzioni non standard. L'utilizzo di una proprietà di trasformazione, ad esempio una funzione di rotazione degli elementi, genera modifiche originali. Esempio:

Qui la striscia cambia continuamente aspetto da opaco a trasparente. In questo caso, l'immagine in basso cambia solo forma.

Informazioni sull'animazione

In CSS: l'animazione del testo ha un significato speciale. Il testo è sempre importante ed è presente in una pagina web per uno scopo specifico. Ma il testo è sempre meno informativo dell'immagine e occupa molto spazio.

La garanzia che il testo scritto correttamente sarà adeguatamente percepito dal visitatore è molto più alta della speranza per la corretta comprensione dell'immagine, soprattutto quando il progettista del sito ha una sua idea delle forme di espressione del significato.

Se prima, quando l'animazione CSS arrivava nel mondo del layout, le linee striscianti, gli orologi lampeggianti, i testi pulsanti erano popolari, nella moderna costruzione di siti è considerato un principio normale: senza infastidire il visitatore, presentare la funzionalità di una risorsa web in modo efficace il più possibile.

In questo contesto, uno qualsiasi degli esempi precedenti è conveniente per rappresentare informazioni testuali, ma l'uso dei CSS come animazione 3D è il più pratico.

Qui, in uno stato "normale", il testo occupa poco spazio. Puoi evidenziare la parola principale o designare il significato. Non appena il mouse passa sopra l'area di testo, si apre dall'animazione CSS 3D al suo normale stato leggibile.

L'opzione salvaspazio combinata con il design 3D consente di posizionare le informazioni in modo compatto. Lo spazio liberato può essere utilizzato per altri scopi o correlati. Con l'animazione CSS, le informazioni di cui hai bisogno saranno disponibili al momento giusto.

Animazione del consumatore

I notevoli successi nella creazione di risorse web di alta qualità lasciano ancora fuori considerazione una domanda posta in modo strano: perché il design del sito è una preoccupazione dello sviluppatore?

Il sito non è un'opera d'arte e non è il risultato di un processo creativo a fini estetici. Un sito è, prima di tutto, una funzionalità che, secondo il proprietario (sviluppatore), attirerà nuovi visitatori e offrirà l'opportunità di lavorare con i propri clienti.

Vendere un prodotto, fornire un servizio, svolgere un lavoro particolare... Un visitatore arriva per beni, servizi e lavori. Il design e l'animazione sono importanti, ma l'opinione del visitatore è ancora più importante dell'opinione del proprietario (sviluppatore).

Se in un normale negozio il cliente ha sempre ragione, allora perché dovrebbe fare tutto nel negozio online nel modo in cui lo sviluppatore ha ideato attraverso l'opzione di progettazione proposta? L'animazione nel contesto dei CSS è un ottimo strumento, ma perché non andare un po' oltre: come molti consumatori, ci sono così tante opzioni per esprimere funzionalità e design.

Una variante di "animazione del consumatore" è quando c'è ciò che lo sviluppatore ha suggerito, ciò che i consumatori precedenti hanno scelto e ciò a cui ha pensato il consumatore attuale.

Ciao amici! Oggi esamineremo un argomento interessante: la creazione di animazioni CSS utilizzando un esempio reale. Questo tutorial culminerà nella creazione di una bellissima animazione del logo CSS da un milione di dollari.

Classe

Zapin

Materiali della lezione

Fonti: Scarica
Esempio di base dal tutorial: https://codepen.io/agragregra/pen/PKNavm
Modello di partenza dal tutorial: https://github.com/agragregra/optimizedhtml-start-template

Un po' di teoria

Prima di iniziare a creare un esempio animato, dovresti esaminare le basi. Animazioni CSS, considera i termini, le proprietà e le regole di base per la creazione di animazioni CSS.

Se hai avuto esperienza nella creazione di animazioni in qualsiasi applicazione, come Adobe After Effects o il vecchio Flash Professional (ora Adobe Animate), allora dovresti avere familiarità con concetti come Keyframes, Timing Functions o Motion Dynamics. », Che, come in qualsiasi altra area di animazione, sono applicabili all'animazione di elementi sulla pagina tramite CSS. Tuttavia, a differenza del lavoro con le interfacce delle applicazioni, crei le tue animazioni CSS scrivendo codice nell'editor.

Regola CSS @keyframes

La creazione di un'animazione CSS inizia dichiarando il nome dell'animazione in un blocco @fotogrammi chiave e definire i cosiddetti passaggi di animazione o fotogrammi chiave.

Per rivedere la teoria e le basi, utilizzeremo CSS puri, e in futuro, con un esempio più complesso, collegheremo l'uso del preprocessore Sass. Puoi saperne di più su Sass nel tutorial. Inoltre, per una più profonda comprensione delle basi dei CSS, ti consiglio anche di leggere le lezioni "CSS Basics - A Guide for the Little Ones" e "All CSS Selectors in One Lesson"

Diamo un'occhiata alla struttura @keyframes e ai keyframe con un semplice esempio:

@keyframes tornitura (0% (border-radius: 0 0 0 0; trasforma: ruota (0deg);) 25% (border-radius: 50% 0 0 0; trasforma: ruota (45deg);) 50% (border- raggio: 50% 50% 0 0; trasformazione: rotazione (90 gradi);) 75% (raggio bordo: 50% 50% 50% 0; trasformazione: rotazione (135 gradi);) 100% (raggio bordo: 50% 50 % 50% 50%; trasformare: ruotare (180 gradi);))

Nella prima riga, vediamo che dopo la parola chiave @keyframes viene il suo nome "turning". Questo è il nome del blocco di fotogrammi chiave, a cui faremo riferimento di seguito.

Dopo la dichiarazione, si apre una parentesi graffa (in questo esempio, in puro CSS), in cui le proprietà per ogni fotogramma chiave sono scritte in sequenza dallo 0% al 100%. Nota che tra 0% e 100%, puoi inserire tutti i valori intermedi che vuoi, che si tratti del 50%, 75% o anche 83%. È molto simile alla sequenza temporale di un'applicazione di animazione, in cui è possibile aggiungere qualsiasi stato intermedio tra i due stati.

Inoltre, questo blocco di codice con fotogrammi chiave può essere applicato a qualsiasi selettore CSS, ma molto spesso sono preparati per un selettore specifico se vogliamo ottenere un determinato comportamento dal blocco desiderato.

Facendo riferimento a un blocco di fotogrammi chiave

Dopo aver impostato i fotogrammi chiave per l'oggetto (nella vita reale questo viene fatto in parallelo o anche dopo l'accesso a un blocco con fotogrammi chiave), possiamo passare al nostro blocco appena creato. Diamo un'occhiata al seguente semplice codice dell'esempio sopra:

Div (larghezza: 120 px; altezza: 120 px; colore di sfondo: viola; margine: 100 px; animazione: rotazione di 2 secondi e 1 secondo alternati all'infinito;)

Niente di eccezionale fino all'ultima riga. Qui definiamo come apparirà inizialmente l'oggetto e nell'ultima riga del blocco ci riferiamo al blocco di keyframe con il nome "turning":

Animazione: girando 2s easy-out 1s infinito alternato;

Se tutto è relativamente chiaro con la definizione dei fotogrammi chiave, allora questa riga necessita di una spiegazione immediata. Come possiamo vedere, prima viene la proprietà CSS "animazione". Questa è una forma abbreviata di notazione, come la proprietà "margin: 20px 30px 40px 50px", che può essere suddivisa in diverse proprietà separate:

Per analogia, la proprietà composita di animazione può essere suddivisa in diverse proprietà separate:

nome-animazione	Il nome dell'animazione a cui si fa riferimento da @keyframes
durata-animazione	La durata o il tempo necessario per eseguire l'animazione CSS. Può essere impostato in secondi (s) o millisecondi (ms)
funzione di temporizzazione dell'animazione	Funzione del tempo, dinamica del movimento dell'oggetto o cambiamenti di proprietà ( sollievo- (predefinito) l'animazione inizia lentamente, accelera e termina lentamente; lineare- l'animazione avviene in modo uniforme; facilità d'uso- parte lentamente e accelera fino all'ultimo keyframe; rilassarsi- parte velocemente e rallenta gradualmente alla fine; facilità di entrata- inizia lentamente e finisce lentamente)
animazione-ritardo	Il tempo di ritardo dell'animazione PRIMA dell'inizio. Impostato anche in secondi o millisecondi.
conteggio-iterazione-animazione	Il numero di ripetizioni (iterazioni) dell'animazione ( infinito- infinito, oppure puoi impostare un numero primo senza unità)
direzione-animazione	Direzione dell'animazione, sequenziale, inversa o andata e ritorno ( normale- (impostazione predefinita) l'animazione viene riprodotta dall'inizio alla fine e si interrompe; alternato- gioca dall'inizio alla fine e nella direzione opposta; alternato-inverso- riproduce dalla fine all'inizio e viceversa; inversione- l'animazione viene riprodotta dalla fine.)
animazione-play-state	Controllo della riproduzione dell'animazione ( in pausa(pausa), in esecuzione(lancio), ecc.). Può essere applicato su: hover o da una funzione JS se necessario
modalità di riempimento-animazione	Lo stato dell'elemento prima e dopo la riproduzione dell'animazione. Ad esempio, il valore indietro ti permette di riportare tutte le proprietà al loro stato originale subito dopo aver applicato l'animazione

Molto spesso, gli sviluppatori esperti non scrivono tutte queste proprietà separatamente, ma usano una breve notazione e la sua struttura è la seguente:

animazione: (1.nome-animazione - nome) (2.durata-animazione - durata) (3.dinamica del movimento con funzione di temporizzazione dell'animazione) (4.ritardo-animazione - pausa prima dell'inizio) (5.iterazione-animazione- count - numero di esecuzioni) (6.animation-direction - direction)

Animazione: nomeanimazione 2s lineare 1s infinito inverso

Dall'esempio vediamo che ci riferiamo al blocco @keyframes animationname, impostiamo la durata dell'animazione a 2 secondi, le dinamiche sono lineari, la pausa prima dell'inizio è di 1 secondo, l'animazione si ripete all'infinito e gira nella direzione opposta.

Come ho detto prima, una breve notazione inizia con la proprietà " animazione", seguito dai valori, la cui sequenza è meglio non dimenticare in modo che non ci sia confusione durante la scrittura delle animazioni CSS.

Tuttavia, la maggior parte di queste proprietà può essere omessa, poiché la maggior parte delle volte i loro valori predefiniti si adatteranno alla maggior parte delle esigenze di animazione. Alcuni di essi possono essere omessi, ma il resto dovrebbe essere indicato nella sequenza che abbiamo considerato in precedenza. In generale, affinché l'animazione funzioni, sono necessari solo due parametri nella proprietà composita: nome ( nome-animazione) e durata ( durata-animazione).