Share
CSS har modnet på mange måter gjennom årene, ikke minst når det gjelder CSS-animasjoner. Med hver dag som går mer og mer, utviklerne skaper levende, pustende grensesnitt. I denne artikkelen vil vi se på tilstanden til CSS-animasjoner, hvordan den har vokst, hva den er i stand til i dag og dekke noen ressurser og verktøy tilgjengelig. La oss flytte!
Bruk av animasjon på nettet øker, hovedsakelig på grunn av overgang og @keyframes tillegg til CSS. Det var en gang da animasjoner og CSS ikke kjenner hverandre, men det er ikke tilfelle i dag. Artikler, opplæringsprogrammer, premium kurs og jevn bevegelsesretningslinjer er langt mer tilgjengelige nå enn de en gang var. kombinere @keyframes med animasjon eiendom, sammen med overgang har endelig gitt utviklere muligheten til å lage bevegelse ordentlig og låne grensesnitt en personlighet og liv en gang uoverensstemmet.
Fra Googles retningslinjer for materialehåndteringDet har aldri vært en mer spennende tid for CSS animasjoner og interaksjonsdesign enn akkurat nå!
Gjeldende implementering av animasjon Egenskapen tillater utviklere å kontrollere varighet, timing, forsinkelse, iterasjonstelling, retning, fyllemodus og spilltilstand. Timingdelen tillater også a trinn () funksjon. Denne spesielle tidsfunksjonen bryter en animasjon eller overgang til segmenter (som en filmstrimmel), i stedet for som en kontinuerlig overgang fra en stat til en annen. Keyframes lar bevegelsesutviklere å deklarere posisjoner ved hjelp av fra, til og til og med prosenter for å animere mellom eiendomsverdier deklarert. Det er en god start, men vi diskuterer i et øyeblikk hvor det blir kort.
Så er det strålende overgang eiendom; en eiendom like fancy som animasjon og en som gjør at vi kan styre animasjonshastigheten når du bytter egenskaper. Prosessen med å overføre mellom to stater kalles vanligvis en implisitt overgang; et begrep som beskriver tilstandene mellom start- og sluttstaten, implisitt definert av nettleseren. Overganger tillater for tiden tilpassing av eiendommen, tidspunktet, varigheten og forsinkelsen.
Introvideoen ovenfor er hentet fra Up and Running With CSS Transitions av Craig Campbell.
CSS animasjon kan være kraftig som den sitter, men det mangler fortsatt et bestemt aspekt animatorer lyst mest, tidslinje-esque kontroll. Hva jeg mener med dette er sekvenser som kan påvirkes og manipuleres basert på timing.
@keyframes move-objekt fra startposisjon og verdier på 2s gjør dette vent til 4s dette skjer til stopp posisjon eiendom og verdier
Syntaxen ovenfor eksisterer ikke, men maler et bilde mer detaljert av hva animasjonseksperter på nettet krever. GreenSock er for eksempel kjent for denne typen sekvensering, men dessverre skjer det bare i JavaScript. Ville det ikke vært bra å ha dette i CSS også? jeg tror det.
Video over tatt fra GreenSock Animasjonsplattform: Første trinn av Craig Campbell.
Det er sikkert evnen til å kontrollere animasjon og overgang hendelser gjennom bruk av JavaScript for ytterligere granulær kontroll av en sekvens. Med JavaScript kan utviklere oppdage starten på hver ny animasjonsherreasjon, når en animasjon oppstår, når animasjonen slutter, og det samme gjelder for overgangshendelser.
Dette er ganske spennende tider for nettleserutviklerverktøy for å inspisere og justere CSS-animasjoner. De fleste nettlesere (Firefox, Chrome) tillater inspeksjon av CSS-animasjoner med hensyn til Safari og Edge. Fra det jeg har fortalt av en kilde som jobber for Microsoft, er animasjonsinspeksjon noe Microsoft-teamet virkelig ønsker å gjøre. La oss håpe dette er det samme for Safari.
Med hensyn til nettleserne som gjøre støtte animasjon inspeksjon har vi følgende evner ...
Accentsconagua
::før og ::etter pseudo-elementer.nøkkelbilder eiendom og verdier på fly.nøkkelbilder navnene.Mens utviklere har ganske mye å velge mellom basert på listen over, krever de fortsatt mer verktøy på animasjoner angående brukerinteraksjon. Dette kan også bli kjent som eiendomsinterpolering, innsetting av en mellomverdi i en serie ved å beregne den fra omgivende kjente verdier; mye som når du bytter til en ny verdi med overganger. Disse dynamiske / reaktive animasjonene kan starte når som helst, er ubestemt, og har variable varigheter basert på brukerinteraksjon. Noe igjen som ikke kan feilsøkes eller inspiseres fra noen utviklerverktøy levert av en nettleser for øyeblikket.
Fremtiden ser lys ut for CSS-animasjon, men med alt spesielt relatert, har det en tendens til å bevege seg sakte. CSS bevegelsesbanen modul, inneholde, Kommer til å endres og foretrekker-redusert-motion media spørring (ikke en standard og bare WebKit) er de nåværende kommende funksjonene for CSS animatorer.
Bevegelsesbaner tillater utviklere å animere noe grafisk objekt langs en forfatterspesifisert bane. Du kan definere en sti på en veldig lik måte som er definert av SVG 1.1.
.min-elementet bevegelsessti: sti ('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 '); bevegelse-offset: 0; bevegelsesrotasjon: revers; De bevegelsesbanen definerer en sti et element vil følge eller bevege seg på. Våre motion-offset Egenskapen er plasseringen av elementet et sted på banen. Eiendommen motion-rotasjon er retningen elementet "ansikter" når det beveger seg langs banen.
Ta en titt på disse samlingene av demo på CodePen fra Dan Wilson som gir liveeksempler bevegelsesbanen evner.
De Kommer til å endres Egenskapen gir en måte for forfattere å hint på nettlesere om hva slags endringer som forventes for et element. Dette gjør at nettleseren kan opprette passende optimaliseringer før tid før elementet faktisk endres.
.min-elementet will-change: transform;
Denne typen optimalisering kan forbedre den oppfattede belastningstiden og utformingen av en side ved å gjøre dyre arbeid på forhånd før de faktisk er påkrevd. Å si at det er foreslått at utviklere ikke gjelder Kommer til å endres til for mange elementer som det kan forbruke ressurser og føre til at en side senkes.
Dette ikke-spesifikke tillegget til WebKit lager stiler som unngår store bevegelsesområder for brukere som angir en preferanse for redusert bevegelse i Systemvalg.
@media (foretrekker redusert bevegelse) .my-element animasjon: none;
Dette er mer av en tilgjengelighetssituasjon versus faktisk bevegelsesskaping. En interessant en å vurdere om og til en å sjekke ut på fritiden.
Denne CSS-modulen indikerer at elementets subtree er uavhengig av resten av siden, og dermed muliggjør store optimaliseringer av brukeragenter når de brukes riktig. Den mest interessante en for CSS animatorer er maling verdi som kan bestås.
.element-med-bevegelse inneholder: maling;
Hvis det inneholdende elementet er avskjermet eller skjult, kan nettleseren direkte hoppe over maleriets innhold som de er garantert å være uten skjerm eller skjult. Dette gir til slutt verdi ved å sikre en raskere reneringsrørledning under en innledende maling. Dette er for tiden fortsatt et arbeidstrykk på W3C.
Det er mange måter å holde tritt med CSS animasjoner. Nedenfor er noen verktøy og ressurser inkludert spesifikasjoner for å lese over på fritiden din. Hvis du vet om andre fantastiske og nyttige ressurser, vennligst gi oss beskjed i kommentarene, og vi legger dem til listen. Glad animasjon!
