Share
I CSS sono maturati in molti modi nel corso degli anni, non ultimo in termini di animazioni CSS. Ogni giorno che passa, sempre più sviluppatori sviluppano interfacce viventi e affascinanti. In questo articolo vedremo lo stato delle animazioni CSS, come è cresciuto, di cosa è capace oggi e comprende alcune risorse e strumenti disponibili. Muoviamoci!
L'uso dell'animazione sul web sta aumentando, in gran parte a causa del transizione e @keyframes aggiunte al CSS. C'era una volta in cui animazioni e CSS non si conoscevano, ma non è il caso oggi. Articoli, tutorial, corsi premium e persino linee guida sul movimento sono ora molto più accessibili di quanto non fossero una volta. combinando @keyframes con il animazione proprietà, insieme a transizione ha finalmente dato agli sviluppatori la possibilità di creare correttamente il movimento e di conferire alle interfacce personalità e vita una volta non considerate.
Dalle linee guida sulla movimentazione dei materiali di GoogleNon c'è mai stato un momento più eccitante per le animazioni CSS e il design di interazione di adesso!
Attuale implementazione del animazione La proprietà consente agli sviluppatori di controllare la durata, i tempi, il ritardo, il conteggio delle iterazioni, la direzione, la modalità di riempimento e lo stato di riproduzione. La parte di temporizzazione consente anche di a (gradini) funzione. Questa speciale funzione di temporizzazione interrompe un'animazione o una transizione in segmenti (come una striscia di pellicola), piuttosto che come una transizione continua da uno stato all'altro. I keyframe consentono agli sviluppatori di movimento di dichiarare le posizioni usando a partire dal, a e persino percentuali da animare tra i valori delle proprietà dichiarate. È un ottimo inizio, ma discuteremo in un momento in cui non ci sarà.
Poi c'è il glorioso transizione proprietà; una proprietà tanto elegante quanto animazione e uno che ci consente di controllare la velocità dell'animazione quando si cambiano le proprietà. Il processo di transizione tra due stati è in genere chiamato a transizione implicita; un termine che descrive gli stati tra gli stati iniziale e finale, implicitamente definiti dal browser. Le transizioni consentono attualmente la personalizzazione della proprietà, i tempi, la durata e il ritardo.
Il video introduttivo qui sopra è tratto da Up and Running With CSS Transitions di Craig Campbell.
L'animazione CSS potrebbe essere potente così com'è, ma manca ancora un aspetto particolare che gli animatori desiderano di più; controllo cronologico. Ciò che intendo per questo sono sequenze che possono essere influenzate e manipolate in base al tempo.
@keyframes move-object from proprietà posizione iniziale e valori in 2s fai questo wait-until 4s this happens to stop position property and values
La sintassi sopra non esiste, ma dipinge un'immagine in modo più dettagliato di ciò che gli esperti di animazione sul web bramano. GreenSock, ad esempio, è ben noto per questo tipo di sequenziamento, ma sfortunatamente accade solo in JavaScript. Non sarebbe bello avere anche questo in CSS? credo di si.
Video in alto tratto dalla piattaforma di animazione GreenSock: Primi passi di Craig Campbell.
C'è certamente la capacità di controllare animazione e transizione eventi attraverso l'uso di JavaScript per un ulteriore controllo granulare di una sequenza. Con JavaScript, gli sviluppatori possono rilevare l'inizio di ogni nuova iterazione dell'animazione, quando si verifica un'animazione, quando termina l'animazione e lo stesso vale per gli eventi di transizione.
Questi sono tempi piuttosto eccitanti per gli strumenti di sviluppo del browser per ispezionare e regolare le animazioni CSS. La maggior parte dei browser (Firefox, Chrome) consente l'ispezione delle animazioni CSS in relazione a Safari e Edge. Da quello che mi è stato detto da una fonte che lavora per Microsoft, l'ispezione delle animazioni è qualcosa che il team Microsoft vuole davvero fare. Speriamo che questo sia lo stesso per Safari.
Per quanto riguarda i browser che fare supportare l'ispezione dell'animazione abbiamo le seguenti abilità ...
Accentsconagua
::prima e ::dopo pseudo-elementi.i fotogrammi chiave proprietà e valori al volo.i fotogrammi chiave nomi.Mentre gli sviluppatori hanno un bel po 'di scelta sulla base dell'elenco sopra, richiedono ancora più strumenti sulle animazioni riguardanti l'interazione dell'utente. Questo potrebbe anche essere conosciuto come interpolazione di proprietà, l'inserimento di un valore intermedio in una serie calcolandolo dai valori noti circostanti; molto simile a quando si passa a un nuovo valore con le transizioni. Queste animazioni dinamiche / reattive possono iniziare in qualsiasi momento, sono indefinite e hanno durate variabili basate sull'interazione dell'utente. Qualcosa ancora una volta che non può essere sottoposto a debug o ispezioni da qualsiasi strumento di sviluppo fornito da un browser in questo momento.
Il futuro sembra luminoso per l'animazione CSS, sebbene con tutte le specifiche relative tende a muoversi lentamente. Il CSS movimento-path modulo, contenere, cambierà e il preferisce ridotto movimento media query (non ancora standard e solo WebKit) sono le funzionalità imminenti per gli animatori CSS.
I percorsi di movimento consentono agli sviluppatori di animare qualsiasi oggetto grafico lungo un percorso specificato dall'autore. È possibile definire un percorso in modo molto simile definito da SVG 1.1.
.mio-elemento percorso del movimento: percorso ('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17,9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7 , 0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17,9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4 z '); offset di movimento: 0; motion-rotation: reverse; Il movimento-path definisce un percorso che un elemento seguirà o passerà sopra. Nostro movimento-offset proprietà è il posizionamento posizione dell'elemento da qualche parte sul percorso. La proprietà motion-rotazione è la direzione in cui l'elemento "si affaccia" mentre si muove lungo il percorso.
Dai un'occhiata a queste raccolte di demo su CodePen di Dan Wilson che forniscono esempi dal vivo movimento-path capacità.
Il cambierà La proprietà fornisce agli autori un modo per suggerire ai browser il tipo di modifiche previste per un elemento. Ciò consente al browser di configurare le ottimizzazioni appropriate in anticipo prima che l'elemento venga effettivamente modificato.
.my-element will-change: transform;
Questo tipo di ottimizzazione può migliorare il tempo di caricamento e il layout di una pagina percepiti completando un lavoro costoso prima del tempo necessario. Detto questo, è suggerito che gli sviluppatori non si applicano cambierà a troppi elementi in quanto può consumare risorse e causare il rallentamento di una pagina.
Questa aggiunta non specifica a WebKit crea stili che evitano ampie aree di movimento per gli utenti che specificano una preferenza per il movimento ridotto Preferenze di Sistema.
@media (preferisce-a movimento ridotto) .my-element animazione: nessuna;
Questa è più una situazione di accessibilità rispetto alla creazione di movimento reale. Uno interessante da considerare se e uno da verificare a vostro piacimento.
Questo modulo CSS indica che la sottostruttura dell'elemento è indipendente dal resto della pagina, consentendo in tal modo pesanti ottimizzazioni da parte dei programmi utente quando utilizzati correttamente. Il più interessante per gli animatori CSS è il dipingere valore che può essere passato.
.element-with-motion contiene: vernice;
Se l'elemento che lo contiene è off-screen o oscurato, il browser può saltare direttamente a dipingere i suoi contenuti in quanto sono garantiti come off-screen o oscurati. Questo alla fine fornisce valore assicurando una pipeline di rendering più veloce durante una verniciatura iniziale. Attualmente è ancora una bozza di lavoro al W3C.
Ci sono molti modi per tenere il passo con le animazioni CSS. Di seguito sono riportati alcuni strumenti e risorse tra cui le specifiche da leggere a vostro piacimento. Se conosci altre fantastiche e utili risorse, faccelo sapere nei commenti e li aggiungeremo alla lista. Felice animazione!
