L'animazione CSS3 è abbastanza ampiamente utilizzata. È giunto il momento anche per i costruttori di siti Web più alle prime armi di capire cos'è l'animazione CSS e come crearla. Potresti pensare che l'animazione CSS3 consista nel far muovere i blocchi e sembra un cartone animato. Ma l'animazione CSS non riguarda solo lo spostamento di un elemento da un punto a un altro, ma anche la distorsione e altre trasformazioni. Per renderlo chiaro anche ai principianti, ho scritto tutto passo dopo passo.
1. Proprietà di base dell'animazione CSS3
Un piccolo blocco teorico da cui capirai di cosa Proprietà CSS 3 sono responsabili dell'animazione, nonché di quali valori possono assumere.
- nome-animazione— un nome univoco per l'animazione (fotogrammi chiave, ne parleremo di seguito).
- durata dell'animazione— durata dell'animazione in secondi.
- funzione di temporizzazione dell'animazione- curva di modifica della velocità dell'animazione. A prima vista non è molto chiaro. È sempre più facile mostrarlo con un esempio e li vedrai di seguito. Può assumere i seguenti valori: lineare | facilità | facilità | allentamento | cubic-bezier(n,n,n,n) .
- ritardo dell'animazione— ritardo in secondi prima dell'inizio dell'animazione.
- conteggio-iterazioni-animazione— numero di ripetizioni dell'animazione. Può essere specificato semplicemente come numero oppure è possibile specificare infinito e l'animazione verrà eseguita all'infinito.
Ecco solo le proprietà di base, che sono più che sufficienti per creare la tua prima animazione CSS3.
L'ultima cosa che dobbiamo sapere e comprendere dalla teoria è come creare fotogrammi chiave. Anche questo è facile da fare e viene fatto utilizzando la regola @keyframes, all'interno della quale vengono specificati i fotogrammi chiave. La sintassi di questa regola è la seguente:
Sopra impostiamo il primo e l'ultimo fotogramma. Tutti gli stati intermedi verranno calcolati AUTOMATICAMENTE!
2. Esempio di animazione CSS3 reale
La teoria, come al solito, è noiosa e non sempre chiara. È molto più facile vedere tutto esempio reale, ma su alcuni è meglio farlo da soli testare l'HTML pagina.
Quando impari un linguaggio di programmazione, di solito scrivi un programma "Hello, world!", da cui puoi capire la sintassi di questo linguaggio e alcune altre cose di base. Ma non stiamo studiando un linguaggio di programmazione, ma un linguaggio di descrizione aspetto documento. Pertanto, avremo il nostro “Hello, world!”
Ecco cosa faremo ad esempio: facciamo una sorta di blocco Sembra che tutto sia chiaro: devi solo comprimere il blocco All'inizio Markup HTML. È molto semplice perché lavoriamo solo con un elemento per pagina. Ed ecco cosa c'è nel file di stile: 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, creare Documento HTML E File CSS, e inserire lì (a meglio con le mani print) il codice dell'esempio. Allora capirai sicuramente tutto. Quindi prova lo stesso con l'altezza del blocco (dovrebbe diminuire in altezza) per fissare il materiale. Sopra hai imparato come creare facilmente un'animazione CSS3. Se hai provato a farlo con le tue mani, allora hai già compreso l'intero processo e ora vuoi scoprire come creare un sistema più complesso e bellissima animazione. E può davvero essere creato. Di seguito sono riportate 3 lezioni in cui l'animazione viene creata nello stesso modo dell'esempio sopra. 3 lezioni sull'animazione CSS (trasformazioni) Le lezioni ti aiuteranno a comprendere ancora meglio l'animazione CSS. La cosa principale è provare a ripetere ciò che vedi nelle lezioni. O almeno prova a modificare i valori delle proprietà e guarda cosa succede, così avrai meno paura dei CSS. | 18.02.2016 I CSS3 aprono possibilità illimitate per i progettisti dell'interfaccia utente e il vantaggio principale è che quasi tutte le idee possono essere facilmente implementate e realizzate senza ricorrere all'uso di JavaScript. È sorprendente come le cose semplici possano ravvivare una normale pagina web e renderla più accessibile agli utenti. Riguarda sulle transizioni CSS3, che possono essere utilizzate per consentire a un elemento di trasformarsi e cambiare stile, ad esempio al passaggio del mouse. I nove esempi di animazioni CSS3 disponibili di seguito ti aiuteranno a creare un'atmosfera reattiva sul tuo sito, oltre a migliorarla forma generale pagine grazie a bellissime transizioni fluide. Per informazioni più dettagliate è possibile scaricare l'archivio con i file. Tutti gli effetti funzionano utilizzando la proprietà di transizione. transizione- “transizione”, “trasformazione”) e la pseudo-class:hover, che determina lo stile dell'elemento quando il cursore del mouse passa sopra di esso (nel nostro tutorial). Per i nostri esempi abbiamo utilizzato blocco div Dimensione 500x309 pixel, colore di sfondo iniziale #6d6d6d e durata della transizione da uno stato all'altro 0,3 secondi. Corpo > div ( larghezza: 500px; altezza: 309px; sfondo: #6d6d6d; -webkit-transition: tutti gli 0.3 sono facili;; -moz-transition: tutti gli 0.3 sono facili;; -o-transition: tutti gli 0.3 sono facili;; transizione: tutti gli 0,3 sono facili; ) Una volta, l'implementazione di un tale effetto era un lavoro piuttosto scrupoloso, con calcoli matematici determinati valori RGB. Per ora basta scrivere Stile CSS, in cui è necessario aggiungere la pseudo-class:hover al selettore e impostare colore di sfondo, che sostituirà gradualmente (in 0,3 secondi) il colore di sfondo originale quando passi il mouse sopra il blocco: Colore:al passaggio del mouse ( sfondo:#53ea93; ) Una trasformazione interessante e sorprendente è la cornice interna che appare uniformemente quando si passa il mouse. Adatto per decorare vari bottoni. Per ottenere questo effetto utilizziamo la pseudo-class:hover e la proprietà box-shadow con il parametro inset (imposta l'ombra all'interno dell'elemento). Inoltre, dovrai impostare l'allungamento dell'ombra (nel nostro caso è 23px) e il suo colore: Bordo:al passaggio del mouse (box-shadow: inset 0 0 0 23px #53ea93;) Questa animazione CSS è un'eccezione perché qui non viene utilizzata la proprietà di transizione. Invece abbiamo utilizzato: L'effetto dissolvenza è essenzialmente un semplice cambiamento nella trasparenza di un elemento. L'animazione viene creata in due fasi: prima è necessario impostare lo stato di trasparenza iniziale su 1, ovvero opacità completa, quindi specificarne il valore quando si passa il mouse - 0,6: Dissolvenza ( opacità: 1; ) .fade:hover ( opacità: 0,6; ) Per il risultato opposto, scambia i valori: Per ingrandire il blocco quando ci si passa sopra, utilizzeremo la proprietà trasforma e la imposteremo su scale(1.2) . In questo caso il blocco aumenterà del 20% mantenendo le sue proporzioni: Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); trasforma: scale(1.2); ) Rimpicciolire un elemento è facile quanto ingrandirlo. Se al quinto punto per aumentare la scala dovessimo specificare un valore maggiore di 1, allora per ridurre il blocco specificheremo semplicemente un valore che sarà minore di uno, ad esempio scale(0.7) . Ora, quando si passa il mouse, il blocco si ridurrà proporzionalmente del 30% rispetto alla sua dimensione originale: Riduci: passa il mouse ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); trasforma: scale(0.7); ) Una delle animazioni comunemente usate è un elemento rettangolare che si trasforma in un cerchio quando ci si passa sopra. Utilizzo della proprietà Raggio del bordo CSS, usato insieme a :hover e transit , può essere implementato senza problemi: Cerchio:al passaggio del mouse (raggio del bordo: 70%;) Un'opzione di animazione divertente consiste nel ruotare un elemento di un certo numero di gradi. Per questo abbiamo di nuovo bisogno trasformare la proprietà, ma con un valore diverso: rotateZ(20deg) . Con questi parametri il blocco verrà ruotato di 20 gradi in senso orario rispetto all'asse Z: Ruota: passa il mouse ( -webkit-transform: ruotaZ(20deg); -ms-transform: ruotaZ(20deg); trasforma: ruotaZ(20deg); ) Le opinioni dei progettisti differiscono sull'opportunità di questo effetto nel design piatto. Tuttavia, questa animazione CSS3 è piuttosto originale e viene utilizzata anche nelle pagine web. Otterremo un effetto tridimensionale utilizzando le già familiari proprietà box-shadow (creerà un'ombra multistrato) e trasformeremo con il parametro TranslateX(-7px) (assicurerà uno spostamento orizzontale del blocco a sinistra di 7 pixel ): Tre:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: TranslateX( -7px); trasformazione: TranslateX(-7px); ) I seguenti browser attualmente supportano la proprietà di transizione: Anche il resto delle proprietà utilizzate in questi esempi, come trasforma , box-shadow , ecc., sono supportate da quasi tutti browser moderni. Tuttavia, se utilizzerai queste idee per i tuoi progetti, ti consigliamo vivamente di ricontrollare la compatibilità tra browser. Ci auguriamo che tu abbia trovato utili questi esempi di animazione CSS3. Ti auguriamo successo creativo! Lo abbiamo visto di recente transizioni- è solo un modo animazioni proprietà di stile da originale Prima finale condizione. Quindi le transizioni nei CSS lo sono specifica tipo di animazione, dove: Ma cosa succede se vuoi: L'animazione in CSS ti consente di fare 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). Come la transizione, la proprietà dell'animazione è abbreviato per alcuni altri: Per animare il pulsante di download, puoi scrivere un'animazione rimbalzando: @keyframes bouncing( 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: rimbalzo 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infiniti alternati entrambi; ) Per prima cosa devi scrivere un'animazione di rimbalzo reale usando @keyframes e chiamarla . ero solito abbreviato proprietà di animazione e includeva tutte le opzioni possibili: Prima di applicare l'animazione agli elementi HTML, è necessario scrivere un'animazione utilizzando i fotogrammi chiave. In generale, i fotogrammi chiave sono ciascuno passaggio intermedio nell'animazione. Sono determinati utilizzando le percentuali: Può anche essere usato parole chiave da e a invece di 0% e 100%, rispettivamente. Puoi definire tutti i fotogrammi chiave che desideri, ad esempio 33%, 4% o anche 29,86%. In pratica ne scriverai solo alcuni. Ogni fotogramma chiave è regola CSS
, ciò significa che puoi scrivere le proprietà CSS come al solito. Per definire un'animazione, scrivi semplicemente la parola chiave @keyframes insieme ad essa nome: @keyframes intorno ( 0% ( sinistra: 0; superiore: 0; ) 25% ( sinistra: 240px; superiore: 0; ) 50% ( sinistra: 240px; superiore: 140px; ) 75% ( sinistra: 0; superiore: 140px ; ) 100% ( sinistra: 0; alto: 0; ) ) p ( animazione: circa 4 secondi lineari infiniti; ) Tieni presente che lo 0% iniziale e il 100% finale contengono stesse regole CSS. Ciò garantisce che l'animazione si ripeta perfettamente. Poiché il contatore delle iterazioni è impostato su infinito, l'animazione passerà dallo 0% al 100% e poi immediatamente Indietro allo 0% e così via all'infinito. Nome almeno viene utilizzata l'animazione due volte: Similmente ai nomi delle classi CSS, il nome dell'animazione può includere solo: Il nome non può iniziare con un numero o due trattini. Come la durata della transizione, la durata dell'animazione può essere impostata su secondi(1s) o millisecondi(200ms). Selettore (durata dell'animazione: 0,5 s;) Il valore predefinito è 0, il che significa nessuna animazione. Simile alle funzioni di temporizzazione della transizione, è possibile utilizzare le funzioni di temporizzazione dell'animazione parole chiave, come lineare , facilitato o può essere definito utilizzando quelli arbitrari Curve di Bezier. Selettore (funzione di temporizzazione dell'animazione: easy-in-out;) Valore predefinito: facilità. Poiché l'animazione in CSS utilizza 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 l'animazione avanzata. Come per il ritardo di transizione, il ritardo dell'animazione può essere impostato su secondi(1s) o millisecondi(200ms). Il valore predefinito è 0, il che significa nessun ritardo di alcun tipo. Utile quando si includono più animazioni serie. A, .b, .c ( animazione: rimbalzo 1s; ) .b ( ritardo animazione: 0,25 s; ) .c ( ritardo animazione: 0,5 s; ) Per impostazione predefinita, viene riprodotta solo l'animazione una volta(valore 1). È possibile impostare tre tipi di valori: La proprietà Animation-Direction specifica se in quale ordine vengono letti i fotogrammi chiave. Ciò è più facile da immaginare se il conteggio delle iterazioni dell'animazione è impostato su infinite . La proprietà Animation-Fill-Mode determina cosa succede Prima inizio dell'animazione e Dopo il suo completamento. Nel determinare fotogrammi chiave può essere specificato 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 indicare al browser se stili di animazione Anche dovrebbe essere applicato oltre l'animazione. Immaginiamo pulsante, che è: Prima dell’avvento dei CSS3, la parola “animazione” faceva sudare freddo ai progettisti di layout. E tutto perché a quei tempi realizzare animazioni belle e di alta qualità non era un compito banale. I CSS non potevano farlo, quindi tutte le animazioni sono state eseguite in JavaScript. È stato necessario vagliare un mucchio di forum, trovare gli stessi compagni sfortunati, dedicare molto tempo allo sviluppo e alla fine sentire dal designer: "Va bene, andrà bene". E quando finalmente è uscito CSS3, i fuochi d'artificio non si sono fermati fino al mattino e lo champagne scorreva come un fiume. È stato un grande giorno per tutti gli sviluppatori web (il giorno successivo è stato quando Microsoft ha annunciato la fine del supporto per Internet Explorer). Con l'avvento dei CSS3, molti prima compiti complessi sono diventati semplici e piacevoli con cui lavorare. Lo stesso vale per le animazioni in CSS, di cui parlerò in questo articolo. Le transizioni CSS ti consentono di apportare modifiche alle proprietà CSS in modo fluido e nel tempo. In questo modo, hai l'opportunità di controllare il processo di transizione di un elemento da uno stato all'altro. Cominciamo con l'esempio più semplice e andiamo avanti. Quando passi il cursore sul quadrato, il colore dello sfondo cambia gradualmente. Ora diamo uno sguardo più da vicino a come gestire le transizioni nei CSS. Abbiamo solo 5 proprietà che ci permettono di controllare l'animazione della transizione: proprietà di transizione- specifica un elenco di proprietà che verranno animate; le proprietà non specificate qui verranno modificate come al solito. Puoi animare tutte le proprietà per un elemento specifico specificando il valore all. Se non si specifica alcuna proprietà, il valore predefinito è all. Proprietà di transizione: larghezza; durata della transizione- imposta la durata dell'animazione; il tempo può essere specificato in secondi o millisecondi. Durata della transizione: 1s; funzione di temporizzazione della transizione- funzione tempo, indica i punti di accelerazione e decelerazione per certo periodo tempo per controllare i cambiamenti nella velocità dell'animazione. In poche parole, puoi utilizzare questa proprietà per specificare il comportamento di un'animazione. Ad esempio, possiamo accelerare l'animazione all'inizio e rallentarla alla fine, o viceversa. Le curve di Bezier vengono utilizzate per definire il processo di animazione. In generale, la funzione di temporizzazione della transizione ti consente di creare molti comportamenti diversi per le animazioni, questo è un argomento intero per un articolo, quindi non andremo più in profondità qui. Funzione di temporizzazione della transizione: cubic-bezier(0, 0, 1, 1); ritardo di transizione- imposta il ritardo prima dell'inizio dell'animazione, può essere specificato in secondi o millisecondi. Ritardo di transizione: 500 ms; transizione- Questo proprietà generale, che consente di elencare in ordine le prime quattro proprietà: proprietà, durata, funzione-temporizzazione, ritardo. Transizione: colore di sfondo 1s cubico-bezier(0, 0, 1, 1) 500ms; Questo è ciò che abbiamo ottenuto animazione semplice: passando con il mouse sul quadrato la larghezza cambia; la durata dell'animazione è di un secondo; l'animazione continua funzione lineare; ritardo prima dell'avvio dell'animazione 500 millisecondi. CON utilizzando i CSS le transizioni possono animare quasi tutte le proprietà e creare molte animazioni interessanti, belle, funzionali e persino complesse che completeranno e miglioreranno il tuo progetto. Ad esempio, ho realizzato questo Material-FAB puro CSS utilizzando le transizioni: Le animazioni CSS ti consentono di creare animazioni più complesse rispetto alle transizioni CSS. L'intero segreto è in @keyframes. La regola @keyframes ti consente di creare un'animazione utilizzando una serie di fotogrammi chiave, ovvero descrive lo stato di un oggetto in un determinato momento. Diamo un'occhiata a un semplice esempio. Il nostro cerchio ha preso vita e sembra pulsare. Esistono 9 proprietà che ti consentono di controllare le animazioni CSS: nome-animazione- ecco il nome dell'animazione che associa la regola @keyframes al selettore. Nome dell'animazione: mia-animazione; @keyframes mia-animazione ( 0% ( opacità: 0; ) 100% ( opacità: 1; ) ) conteggio-iterazioni-animazione- imposta il numero di ripetizioni dell'animazione, il valore predefinito è 1. Il valore infinito significa che l'animazione verrà riprodotta all'infinito. Conteggio iterazioni dell'animazione: 2; direzione-animazione- imposta la direzione dell'animazione. Direzione dell'animazione: inversa; stato di riproduzione dell'animazione - questa proprietà controlla l'arresto e la riproduzione dell'animazione. Sono disponibili due valori, running (l'animazione viene riprodotta per impostazione predefinita) e paused (interrompe l'animazione). Stato di riproduzione dell'animazione: in pausa; modalità di riempimento dell'animazione- imposta quali proprietà CSS verranno applicate all'oggetto prima o dopo l'animazione. Può assumere i seguenti valori: Modalità di riempimento dell'animazione: all'indietro; Proprietà durata dell'animazione, funzione di temporizzazione dell'animazione, ritardo dell'animazione Funzionano allo stesso modo delle proprietà simili nelle transizioni CSS, di cui ho parlato prima, quindi non le ripeterò. Con le animazioni CSS puoi creare animazioni piuttosto complesse senza utilizzando JavaScript. Un esempio lampante sono i caricatori, ovvero gli elementi che mostrano che qualcosa si sta caricando sulla tua pagina. Ecco alcuni esempi: Il modulo Motion Path CSS ti consente di creare il movimento degli oggetti lungo un percorso attraverso la speciale proprietà motion-path. In precedenza, tale animazione poteva essere eseguita solo con utilizzando SVG o script complessi. Questa specifica ha 3 proprietà: percorso di movimento- questa proprietà consente di specificare i punti (coordinate) lungo i quali si sposterà l'oggetto. La sintassi è la stessa dell'attributo del percorso SVG. Percorso-movimento: path("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z"); spostamento del movimento- questa proprietà mette in movimento un oggetto dal punto iniziale al punto finale. Accetta il doppio della lunghezza o una percentuale. Affinché l'oggetto inizi a muoversi, è necessario definire un'animazione che andrà dallo 0 al 100%. @keyframes volo aereo ( 0% ( spostamento-offset: 0; ) 100% ( movimento-offset: 100%; ) ) movimento-rotazione- questa proprietà consente di specificare da quale lato si sposterà l'oggetto. È possibile specificare auto, reverse o il proprio valore in gradi ("-45deg", "30deg", ecc.). Movimento-rotazione: automatico; Purtroppo motion-path è attualmente supportato solo da Chrome e Opera, ma speriamo che altri browser seguano presto il loro esempio, perché la cosa è davvero utile. Per chi non ha ancora capito come funziona, o vuole capirlo meglio, ho fatto un esempio (link a codeopen).
Sempre più su molti pagina di destinazione o pagine promozionali, puoi trovare vari effetti animazione. Dopotutto, rendono la pagina più interessante e attraente. Fondamentalmente, questi effetti sono impostati su qualche evento (fare clic o passare il mouse su un elemento) o al momento dello scorrimento della pagina. Penso che ti sia capitato di imbatterti in siti di questo tipo quando, mentre scorri una pagina, vari elementi appaiono in modo fluido e bello. In precedenza, per implementare questi effetti, dovevi utilizzare solo JS, ma lo sviluppo non si ferma e con il rilascio di CSS3 tutti questi effetti possono essere implementati su di esso. IN questa lezione Ti presenteremo uno strumento molto interessante chiamato animare.css. È pronto CSS pronto un foglio di stile che ha oltre 50 effetti diversi nel suo arsenale e tutti questi effetti sono implementati nei CSS3. Per usarlo è sufficiente impostare l'elemento richiesto classe specifica e a questo elemento verrà applicato un effetto di animazione. Come ho detto prima, questa animazione è implementata in CSS3, quindi questi effetti funzioneranno in tutti i browser moderni. Ora diamo uno sguardo più da vicino animare.css. Guarda il videotutorial Se hai fatto tutto come descritto sopra, quando la pagina viene caricata, questo effetto verrà applicato all'elemento e il gioco è fatto, l'animazione finirà lì. Ma cosa succede se hai bisogno che l'animazione continui senza interruzioni? Per fare ciò, basta aggiungere un'altra classe per il nostro elemento animato. Questa è la classe - infinito. Imposta l'animazione quando passi il mouse su un elemento Guarda il videotutorial Tutti gli esempi descritti in precedenza impostano l'animazione immediatamente dopo il caricamento della pagina, ma nella pratica ciò è raramente necessario. In pratica molto spesso è necessario impostare un'animazione quando si passa sopra un elemento, e per questo l'ho fornita di seguito codice pronto questa implementazione. HTML Il nostro markup è leggermente cambiato, ora non abbiamo bisogno di specificare una classe responsabile di un'animazione specifica. Dobbiamo indicare questo valore in attributo speciale effetto dati. Per favore fate attenzione a questo, è molto importante. Ecco un piccolo codice per jQuery, che terrà traccia dell'evento del passaggio del mouse sull'elemento e se si verifica di questo evento, lo script aggiungerà ad esso una classe, il cui valore è specificato nell'attributo effetto dati. Aggiungendo questa classe, verrà applicata l'animazione. Funzione animate(elem)( var effect = elem.data("effetto"); if(!effect || elem.hasClass(effetto)) return false; elem.addClass(effetto); setTimeout(function())( elem. rimuoviClasse (effetto); ), 1000); ) $(".animato").mouseenter(funzione() ( animato($(questo)); )); Naturalmente puoi modificare questo script come preferisci, ad esempio puoi modificare l'evento in esso contenuto mouseinvio SU clic. Quindi in questo caso l'animazione non avverrà nel momento in cui il mouse passa sopra l'elemento, ma nel momento in cui si fa clic. Guarda il videotutorial E infine, diamo un'occhiata a un altro esempio in cui puoi utilizzare facilmente animare.css. Vale a dire, puoi impostare effetti diversi per gli elementi durante lo scorrimento della pagina. Per questi scopi, oltre a animare.css, ne avremo bisogno di più scrittura speciale wow.js. 1
<div class = "toSmallWidth" >
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; /*margini 20px in alto e in basso e allineato al centro*/ sfondo: rosso; /*sfondo rosso del blocco*/ altezza: 100px; /*altezza blocco 100px*/ larghezza: 800px; /*larghezza iniziale 800px*/-nome-animazione-webkit: animWidthSitequi; -durata-animazione-webkit: 5s; /* proprietà con prefisso per Browser Chrome, Safari, Opera */ nome-animazione: animWidthSitequi; /* indica il nome dei fotogrammi chiave (situati sotto)*/ durata dell'animazione: 5s; /*imposta la durata dell'animazione*/
}
/* fotogrammi chiave con prefisso per i browser Chrome, Safari, Opera */
@-webkit-keyframes animWidthSitequi ( da (larghezza: 800px;) a (larghezza: 100px;)) @keyframes animWidthSitequi ( da (larghezza: 800px;) /*primo fotogramma chiave in cui la larghezza del blocco è 800px*/ a (larghezza: 100px;) /*ultimo fotogramma chiave, dove la larghezza del blocco è 100px*/
}
3. Esempi di animazioni CSS3 più complessi
1. Cambia colore al passaggio del mouse
2. Aspetto del telaio
3. Altalena
@-webkit-keyframes swing ( 15% ( -webkit-transform: TranslateX(9px); trasformazione: TranslateX(9px); ) 30% ( -webkit-transform: TranslateX(-9px); trasformazione: TranslateX(-9px); ) 40% ( -webkit-transform: TranslateX(6px); trasformazione: TranslateX(6px); ) 50% ( -webkit-transform: TranslateX(-6px); trasformazione: TranslateX(-6px); ) 65% ( -webkit -transform: TranslateX(3px); Transform: TranslateX(3px); ) 100% ( -webkit-transform: TranslateX(0); Transform: TranslateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: tradurreX(9px); trasformare: tradurreX(9px); ) 30% ( -webkit-trasformare: tradurreX(-9px); trasformare: tradurreX(-9px); ) 40% ( -webkit-trasformare: tradurreX(6px); trasformare : TranslateX(6px); ) 50% ( -webkit-transform: TranslateX(-6px); trasformazione: TranslateX(-6px); ) 65% ( -webkit-transform: TranslateX(3px); trasformazione: TranslateX(3px); ) 100% ( -webkit-transform: TranslateX(0); trasforma: TranslateX(0); ) ) .swing:hover ( -webkit-animation: swing 0.6s facilità; animazione: swing 0,6 secondi con facilità; -conteggio iterazioni-animazione-webkit: 1; conteggio-iterazioni-animazione: 1; ) 4. Attenuazione
5. Ingrandimento
6. Riduzione
7. Trasformazione in cerchio
8. Rotazione
9. Ombra 3D
Supporto del browser
Browser desktop
Internet Explorer
Supportato da IE 10 e versioni successive
Cromo
Supportato dalla versione 26 (fino alla versione 25 funziona con il prefisso -webkit-)
Firefox
Supportato dalla versione 16 (nelle versioni 4-15 funziona con il prefisso -moz-)
musica lirica
Supportato dalla versione 12.1
Safari
Supportato dalla versione 6.1 (nelle versioni 3.1-6 funziona con il prefisso -webkit-)
Proprietà dell'animazione
Esempio rapido
@keyframe
nome-animazione
@keyframes qualunque ( /* ... */ ) .selector ( nome-animazione: qualunque; ) durata dell'animazione
funzione di temporizzazione dell'animazione
ritardo dell'animazione
conteggio-iterazioni-animazione
.selector (conteggio-iterazioni-animazione: infinito;) direzione-animazione
modalità di riempimento dell'animazione
Transizioni CSS
animazioni CSS
Modulo del percorso di movimento
Markup HTML di base
Animazione infinita
Intestazione
HTML
Intestazione
Realizzare animazioni durante lo scorrimento della pagina
