Praksisen med å utvikle nettressurser har ført til to viktige trender: hastighet og ideen om kvalitet. Den første forplikter utvikleren til å gjøre arbeidet sitt raskt, det andre definerer grensene for hva som er hensiktsmessig.
Den besøkende har et spesifikt mål når han besøker et nettsted og styres av allment aksepterte ideer om hvor ting er og hvordan de skal fungere. Utbygger kan gjøre jobben sin som det passer ham, men hvis han er interessert i å tiltrekke seg oppmerksomhet flere besøkende, så er det upassende å ikke ta hensyn til deres mening.
Syntaks og semantikk av animasjon
CSS-animasjonsegenskapen er enkel å bruke og lar deg raskt lage interessante effekter. For at elementene på en nettside skal oppføre seg på en moderne måte, slik den besøkende forventer, er det slett ikke nødvendig å være spesielt oppfinnsom og designe dine egne animasjonsmuligheter. Alt fungerer per definisjon, som forventet og nødvendig.
Dette eksemplet beskriver to elementer. Den første er en indikatorlinje som beveger seg til høyre og øker proporsjonalt i størrelse. Det andre elementet er et bilde som ganske enkelt beveger seg til høyre.
Ikke alle rammer vises her. Eiendommen i dette tilfellet implementeres jevnt. Den besøkende på siden observerer en jevn bevegelse med en økning i volumet på linjen og bevegelsen av bildet. Ved å bruke forskjellige bevegelsesalternativer i stedet for lett-inn-ut-typen, kan du kontrollere bevegelsen. Lett-inn-ut-alternativet gir akselerasjon i begynnelsen og bremsing på slutten, men du kan velge et annet bevegelsesalternativ.
Overlegg og interaksjon av elementer
Alle elementer som har animasjonsegenskapen behandles uavhengig av CSS fra hverandre og fra den generelle flyten på siden. Hvis elementer legges over hverandre, oppnås en kombinasjon av effekter og som et resultat en ny effekt.
Hvis elementer under animasjonsprosessen endrer egenskaper, kan du på grunn av lovene for fargeoverlegg få veldig originale effekter med bare to eller tre elementer.
Utformingen av elementet er av stor betydning. I eksemplet er stripen dannet av et bilde der to linjer har forskjellige farger. Når størrelsen på stripen øker, er det en sag når sagen beveger seg, er det en bevegelig bølge. Ved å manipulere linjene og skråningen deres, kan du lage effekter i henhold til de generelle lovene for grafikk.
Endring av animasjonstiden fører også til ikke-standardiserte løsninger. Ved å bruke en transformasjonsegenskap, for eksempel et elements rotasjonsfunksjon, genereres originale endringer. Eksempel:
Her endrer stripen kontinuerlig utseende fra en ugjennomsiktig tilstand til en gjennomsiktig. Det nederste bildet endrer bare form.
Animasjon av informasjon
I CSS: tekstanimasjon har en spesiell betydning. Tekst har alltid mening og er tilstede på en nettside for et bestemt formål. Men tekst er alltid mindre informativ enn et bilde og tar mye plass.
Garantien for at en korrekt skrevet tekst vil bli tilstrekkelig oppfattet av den besøkende er mye høyere enn håpet om en korrekt forståelse av bildet, spesielt når nettsteddesigneren har sin egen ide om formene for å uttrykke mening.
Hvis tidligere, da CSS-animasjon nettopp kom inn i layoutens verden, var krypende linjer, blinkende klokker og pulserende tekster populære, så i moderne nettstedsbygging anses følgende prinsipp som normalt: uten å irritere besøkende, presenter funksjonaliteten til en nettressurs så effektivt som mulig.
I denne sammenhengen er alle eksemplene ovenfor praktiske å representere tekstinformasjon, men muligheten til å bruke CSS som 3D-animasjon er det mest praktiske.
Her, i "normal" tilstand, tar teksten liten plass. Du kan markere hovedordet eller angi betydningen. Så snart musen treffer tekstområdet, utvides den fra CSS 3D-animasjonen til en normal lesbar tilstand.
Det plassbesparende alternativet kombinert med 3D-design lar deg plassere informasjon kompakt. Den frigjorte plassen kan brukes til andre eller relaterte formål. Takket være CSS-animasjon vil nødvendig informasjon være tilgjengelig til rett tid.
Alternativ for forbrukeranimasjon
Bemerkelsesverdige suksesser med å lage nettressurser av høy kvalitet etterlater fortsatt et merkelig stilt spørsmål utenfor betraktning: hvorfor er nettsteddesign en utviklers bekymring?
Siden er ikke et kunstverk eller et resultat av en kreativ prosess for estetiske formål. Et nettsted er for det første en funksjonalitet som, etter eierens (utviklerens) mening, vil bringe nye besøkende til den og gi muligheten til å jobbe med sine kunder.
Selge et produkt, yte en tjeneste, utføre dette eller det arbeidet... Den besøkende kommer for varer, tjenester og arbeid. Design og animasjon er viktig, men den besøkendes mening er likevel viktigere enn eierens (utviklerens) mening.
Hvis kjøperen alltid har rett i en vanlig butikk, hvorfor i en nettbutikk skal han gjøre alt slik utvikleren kom på gjennom det foreslåtte designalternativet? Animasjon i sammenheng med CSS er et flott verktøy, men hvorfor ikke gå litt lenger: så mange forbrukere som det er, så mange muligheter for å uttrykke funksjonalitet og design.
Alternativet "forbrukeranimasjon" er når det er hva utvikleren foreslo, og hva tidligere forbrukere valgte, og hva den nåværende forbrukeren kom opp med.
Denne samlingen inneholder de beste CSS-funksjonene av høyeste kvalitet. Her kan du finne forskjellige og fantastiske demo-eksempler og teknikker fra kjente layoutdesignere og designere som prøver å bevise at det nå er mulig å gjøre nesten alt med kun ren CSS. Du kan også finne flere leksjoner her som forteller deg i detalj hvordan du lager en slik kreasjon. Jeg håper at denne samlingen vil være nyttig for deg.
CSS 3D-skyer
I denne demoen vil du kunne lage og redigere fancy skyer i 3D. Disse CSS-skyene gjør det klart for oss at mulighetene til webteknologi er nesten ubegrensede.
Rene CSS-logoer
Dette er eksempler på logoer laget kun med ren CSS. Bare tenk på det, ingen bilder ble brukt i opprettelsen. Det er bare noe.
Alfabet med CSS-animasjon
Flott og kunstnerisk eksempel på bruk av CSS i alfabetet
3D-navigasjon for nettstedet
En enkel, men veldig stilig navigasjonslinje for nettstedet, selvfølgelig laget med kun CSS3. ingen bilder eller skript.
Google Doodle med CSS
En av mange kruseduller fra Google søkemotor, laget i CSS. Dette er et godt eksempel på god bruk av CSS-animasjon.
Skyveknapp
En godt laget bildeglidebryter av høy kvalitet. Pluss 4 eksempler i demoen.
Dobbel animert ring
En vakker animert og flerfarget ring med ikke mye CSS-kode
Uskarphet i CSS
Det virker for meg veldig nødvendig filter, spesielt siden den er laget i ren CSS. Ved å bruke uskarphet kan du trekke brukerens oppmerksomhet til et bestemt punkt.
Den komplette guiden til Flexbox
Denne artikkelen handler om responsive Flexbox-blokker. Den snakker fullstendig om disse blokkene, selv om artikkelen er på engelsk.
Fargerik og animert meny ved hjelp av CSS3
En vakker rullegardinmeny for et nettsted med ikoner. Et stort pluss er at den er laget helt i CSS.
CSS-filtre
Materiale av høy kvalitet på engelsk som beskriver applikasjonen CSS-filtre til bildene.
CSS-skjemaer
Et innlegg om CSS-skjemaer med mange eksempler
Fremdriftsindikatorer i CSS
En leksjon om hvordan du lager stilige fremdriftslinjer ved hjelp av ren CSS og animasjon. Du kan også se på eksemplet og laste ned kildene.
Animasjon - Animate.css
Det mest populære CSS-animasjonsprosjektet på Internett i dag. Og sannsynligvis den enkleste og høyeste kvaliteten, og også gratis.
Alle moderne nettlesere, unntatt IE9, støtter CSS-overganger og CSS-animasjoner, som lar deg implementere animasjon ved hjelp av CSS, uten å involvere JavaScript. Animasjon gjelder for alle html-elementer, så vel som pseudo-elementer :før Og :etter
Nettleserstøtte
IE: 10.0
Firefox: 16,0, 5,0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Android-nettleser: 44, 4.1 -webkit-
Chrome for Android: 44
For å bruke animasjon i prosjektet ditt, trenger du bare å gjøre to ting:
- Lag selve animasjonen ved å bruke nøkkelordet @keyframes
- Koble den til elementet som skal animeres og spesifiser de nødvendige egenskapene.
@keyframes-regel
Regel @keyframes lar deg lage animasjoner ved hjelp av nøkkelbilder - tilstander til et objekt på et bestemt tidspunkt.
Animasjonsnøkkelrammer lages ved hjelp av nøkkelord fra Og til(tilsvarer verdiene 0% og 100%) eller ved å bruke prosentpoeng, som kan settes så mange du vil. Kan også kombineres søkeord og prosentpoeng.
Hvis innledende ( fra, 0%) eller endelig ( til, 100%) ramme, vil nettleseren angi de beregnede verdiene for de animerte egenskapene for dem slik de ville vært hvis animasjon ikke hadde blitt brukt.
Hvis to nøkkelbilder har samme velgere, vil den påfølgende avbryte den forrige.
Når du definerer en animasjon umiddelbart etter en eiendom @keyframes må følges av navnet på denne animasjonen ( fornavn må da spesifiseres i animasjonsegenskapen til elementet som skal animeres).
@keyframes flytte ( fra ( transform: translateX(0px); ) 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )
@keyframes flytte ( fra ( 50% { 100% { transform: translateX(0px); |
Vi har laget en animasjon som fungerer slik:
- Start av animasjon ( fra kunne vært skrevet 0%) — posisjonen til elementet langs X-aksen er 0px;
- Midten av animasjonen (50 %) - elementets posisjon langs X-aksen er 130 px;
- Slutt på animasjon ( til vi brukte 100%) - vi returnerer elementet til begynnelsen av animasjonen, dvs. elementets X-akseposisjon er 0px;
Her og nedenfor, for enkelhets skyld, skrev jeg i eksemplene flere linjer med JavaScript som vekselvis vil legge til eller fjerne en klasse med animasjon på et element, så for å spille av animasjonen, klikker du bare på dette elementet.
Keyframes kan grupperes:
@keyframes flytte ( fra ( transform: translateX(0px); ) 25%, 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )
@keyframes flytte ( fra ( transform: translateX(0px); 25%, 50% { transform: translateX(130px); 100% { transform: translateX(0px); |
Du kan tilordne flere animasjoner til ett element. Navnene deres og parameterne må skrives i tildelingsrekkefølgen:
element ( animasjon-navn: animasjon-1, animasjon-2; animasjon-varighet: 2s, 4s; )
element( animasjon-navn: animasjon-1, animasjon-2; animasjon-varighet: 2s, 4s; |
Å koble animasjon til et element gjøres ved å bruke to kommandoer - animasjonsnavn Og animasjon-varighet.
Animasjonsnavn
Eiendom animasjonsnavn angir navnet på animasjonen. Det anbefales å bruke et navn som gjenspeiler essensen av animasjonen, og du kan bruke ett eller flere ord, koblet sammen ved hjelp av et mellomrom - eller et understrek _.
animasjonsnavn: flytte;
Tidsfunksjon
Eiendom animasjon-timing-funksjon lar deg angi en spesiell funksjon som er ansvarlig for. Vær oppmerksom på at oftest er ikke-lineær, dvs. dens øyeblikkelige hastighet i forskjellige områder vil variere. På for øyeblikket Det er flere allerede innebygde argumenter for denne regelen: letthet, lette inn, lette ut , lette inn-ut, lineær , trinn-start , trinn-ende.
Du kan imidlertid lage slike funksjoner selv. Spesiell funksjon cubic-bezier(P1x, P1y, P2x, P2y); tar fire argumenter og bygger en verdifordelingskurve basert på dem under animasjonsprosessen. Du kan øve på å lage dine egne funksjoner og se hvordan de fungerer på denne siden.
Til slutt kan animasjonen gjøres om til et sett med diskrete verdier ved å bruke funksjonen trinn(antall trinn, retning), hvis argumenter spesifiserer antall trinn og retningen som kan ta verdier start eller slutt .
- letthet- standardfunksjon, animasjonen starter sakte, akselererer raskt og bremser ned på slutten. Tilsvarer cubic-bezier(0.25,0.1,0.25,1).
- lineær— animasjon skjer jevnt over hele tiden, uten svingninger i hastighet; tilsvarer cubic-bezier(0,0,1,1).
- lette inn— animasjonen starter sakte og øker deretter jevnt på slutten; tilsvarer cubic-bezier(0.42,0,1,1).
- lette ut— animasjonen starter raskt og sakter jevnt ned på slutten; tilsvarer cubic-bezier(0,0,0.58,1).
- lette inn-ut— animasjon starter sakte og slutter sakte; tilsvarer cubic-bezier(0.42,0,0.58,1).
- kubikk-bezier(x1; y1; x2; y2)- se ovenfor.
- arve- arver denne egenskapen fra det overordnede elementet.
Visuell sammenligning
Animasjon med forsinkelse
Eiendom animasjonsforsinkelse definerer forsinkelsen før animasjonen begynner å spille, satt i sekunder eller millisekunder. En negativ forsinkelse starter animasjonen fra et bestemt punkt i syklusen, dvs. fra det tidspunktet som er angitt i forsinkelsen. Dette lar deg bruke animasjon på flere faseforskyvede elementer ved å endre forsinkelsestiden. Hvis du vil at animasjonen skal starte fra midten, sett en negativ forsinkelse lik halvparten av tiden som er satt inn animasjon-varighet. Ikke arvet.
element ( animasjonsnavn: animasjon-1; animasjonsvarighet: 2 s; animasjonsforsinkelse: 10 s; // 10 sekunder vil gå før denne animasjonen starter)
Gjenta animasjon
Eiendom animasjon-iterasjon-telling lar deg kjøre animasjonen flere ganger. Ikke arvet. Sett verdien til en hvilken som helst positiv verdi 1, 2, 3 … osv. eller uendelig for endeløs repetisjon. Betydning 0 eller et negativt tall fjerner animasjonen fra å spilles av.
Det så vi nylig overganger- det er bare en måte animasjoner stilegenskaper fra opprinnelig til endelig betingelse.
Så overganger i CSS er det spesiell type animasjon, hvor:
- det er bare to tilstander: begynnelse og slutt;
- animasjonen er ikke loopet;
- mellomtilstander styres kun av en tidsfunksjon.
Men hva om du vil:
- ha kontroll over mellomliggende stater?
- løkke animasjon?
- lage forskjellige typer animasjoner for en element?
- animer kun en bestemt egenskap på halv måter?
- imitere ulike tidsfunksjoner for ulike eiendommer?
Animasjon i CSS lar deg gjøre alt dette og mer.
Animasjon er som en minifilm, der du som regissør gir instruksjoner (stilregler) til skuespillerne dine ( HTML-elementer) for forskjellige scener (nøkkelbilder).
Animasjonsegenskaper
Som overgang er animasjonsegenskapen forkortet for noen andre:
- animasjonsnavn: animasjonsnavn;
- animasjon-varighet: hvor lenge animasjonen varer;
- animasjon-timing-funksjon: hvordan mellomtilstander beregnes;
- animasjon-forsinkelse: animasjonen starter etter en stund;
- animation-iteration-count : hvor mange ganger animasjonen skal utføres;
- animasjonsretning: bør bevegelsen gå i motsatt retning eller ikke;
- animasjon-fyll-modus : hvilke stiler brukes før animasjonen starter og etter at den slutter.
Rask eksempel
For å animere nedlastingsknappen kan du skrive en animasjon spretter:
@keyframes spretter( 0 % (bunn: 0; boksskygge: 0 0 5px rgba(0,0,0,0.5); ) 100 % (bunn: 50px; boksskygge: 0 50px 50px rgba(0,0, 0,0,1);
Først må du skrive en faktisk hoppende animasjon ved å bruke @keyframes og kalle den .
jeg brukte forkortet animasjonseiendom og inkluderte alle mulige alternativer:
- animasjonsnavn: spretter (samme som nøkkelbildenavn)
- animasjon-varighet: 0,5 s (et halvt sekund)
- animasjon-timing-funksjon: cubic-bezier(0.1,0.25,0.1,1)
- animasjonsforsinkelse: 0s (ingen forsinkelse)
- animasjon-iterasjon-antall: uendelig (spilles uendelig)
- animasjonsretning: alternativ (går frem og tilbake)
- animasjon-fyll-modus: begge
@keyframes
Før du bruker animasjon på HTML-elementer, trenger du skrive en animasjon ved hjelp av keyframes. Generelt er nøkkelrammer hver mellomtrinn i animasjon. De bestemmes ved hjelp av prosenter:
- 0% - første trinn i animasjonen;
- 50 % er halvveis i animasjonen;
- 100 % er det siste trinnet.
Du kan også bruke fra og til søkeord i stedet for henholdsvis 0 % og 100 %.
Du kan definere så mange nøkkelbilder du vil, som 33 %, 4 % eller til og med 29,86 %. I praksis vil du bare skrive noen av dem.
Hver keyframe er CSS-regel, betyr dette at du kan skrive CSS-egenskaper som vanlig.
For å definere en animasjon, skriv ganske enkelt nøkkelordet @keyframes med den navn:
@keyframes rundt ( 0 % ( venstre: 0; topp: 0; ) 25 % ( venstre: 240px; topp: 0; ) 50 % ( venstre: 240px; topp: 140px; ) 75 % ( venstre: 0; topp: 140px ; ) 100 % ( venstre: 0; topp: 0; ) ) p ( animasjon: rundt 4s lineær uendelig; )
Merk at start 0% og slutt 100% inneholder samme regler CSS. Dette sikrer at animasjonen går perfekt. Siden iterasjonstelleren er satt til uendelig, vil animasjonen gå fra 0 % til 100 % og deretter umiddelbart tilbake til 0 % og så videre i det uendelige.
animasjonsnavn
Navn animasjon brukes i det minste to ganger:
- på skriving animasjoner ved hjelp av @keframes ;
- på bruk animasjon ved å bruke egenskapen animasjon-navn (eller animasjonsstenografi-egenskapen).
I likhet med CSS-klassenavn kan animasjonsnavnet bare inneholde:
- bokstaver (a-z);
- tall (0-9);
- understrek(_);
- bindestrek (-).
Navnet kan ikke begynne med et tall eller to bindestreker.
animasjon-varighet
Som overgangsvarighet kan animasjonsvarighet settes til sekunder(1s) eller millisekunder(200 ms).
Velger ( animasjon-varighet: 0,5 s; )
Standardverdien er 0s, som betyr ingen animasjon i det hele tatt.
animasjon-timing-funksjon
I likhet med overgangstidsfunksjoner kan animasjonstimingfunksjoner brukes søkeord, for eksempel lineær , ease-out eller kan defineres ved hjelp av vilkårlige Bezier-kurver.
Velger ( animasjon-timing-funksjon: lette-inn-ut;)
Standardverdi: letthet.
Siden animasjon i CSS bruker nøkkelbilder, kan du angi lineær funksjon av tid og simulere spesifikk Bezier-kurve ved å definere mange veldig spesifikke nøkkelrammer. Sjekk ut Bounce.js for avansert animasjon.
animasjonsforsinkelse
Som med overgangsforsinkelse, kan animasjonsforsinkelse settes til sekunder(1s) eller millisekunder(200 ms).
Standard er 0s, som betyr ingen forsinkelse av noe slag.
Nyttig når du inkluderer flere animasjoner i en serie.
A, .b, .c ( animasjon: spretter 1s; ) .b ( animasjonsforsinkelse: 0,25 s; ) .c ( animasjonsforsinkelse: 0,5 s; )
animasjon-iterasjon-telling
Som standard spilles animasjonen bare av en gang(verdi 1). Du kan angi tre typer verdier:
- hele tall, som 2 eller 3;
- brøktall som 0,5, som bare vil spille halvparten av animasjonen;
- det uendelige nøkkelordet, som vil gjenta animasjonen i det uendelige.
animasjonsretning
Animation-direction-egenskapen spesifiserer om i hvilken rekkefølge nøkkelrammer leses.
- normal : starter på 0 %, slutter på 100 %, starter på 0 % igjen.
- revers : starter på 100 %, slutter på 0 %, starter på 100 % igjen.
- alternativ : starter på 0 %, går til 100 %, går tilbake til 0 %.
- alternativ-revers : starter på 100 %, går til 0 %, går tilbake til 100 %.
Dette er lettere å forestille seg hvis antall animasjonsgjentakelser er satt til uendelig.
animasjon-fyll-modus
Egenskapen for animasjon-fyll-modus bestemmer hva som skjer før start av animasjon og etter dens ferdigstillelse.
Når man bestemmer nøkkelrammer kan spesifiseres CSS-regler, som vil bli brukt ved forskjellige animasjonstrinn. Nå kan disse CSS-reglene kollidere med de som allerede brukt til animerte elementer.
animation-fill-modus lar deg fortelle nettleseren om animasjonsstiler Også må påføres utover animasjon.
La oss forestille oss knapp, som er:
- rød misligholde;
- blir blå i begynnelsen av animasjonen;
- og til slutt grønn når animasjonen er fullført.
CSS-animasjoner gjør det mulig å animere overganger fra en CSS-stilkonfigurasjon til en annen. Animasjoner består av to komponenter, en stil som beskriver CSS-animasjonen og et sett med nøkkelbilder som indikerer start- og slutttilstander for animasjonens stil, samt mulige mellomliggende veipunkter.
Det er tre hovedfordeler med CSS-animasjoner fremfor tradisjonelle skriptdrevne animasjonsteknikker:
- De er enkle å bruke for enkle animasjoner; du kan lage dem uten å måtte kunne JavaScript.
- Animasjonene kjører bra, selv under moderat systembelastning. Enkle animasjoner kan ofte fungere dårlig i JavaScript (med mindre de er godt laget). Gjengivelsesmotoren kan bruke frame-hopping og andre teknikker for å holde ytelsen så jevn som mulig.
- Å la nettleseren kontrollere animasjonssekvensen lar nettleseren optimere ytelsen og effektiviteten ved for eksempel å redusere oppdateringsfrekvensen til animasjoner som kjører i faner som for øyeblikket ikke er synlige.
Konfigurering av animasjonen
For å lage en CSS-animasjonssekvens, stiler du elementet du vil animere med animasjonsegenskapen eller dens underegenskaper. Dette lar deg konfigurere timing, varighet og andre detaljer for hvordan animasjonssekvensen skal utvikle seg. Dette gjør det ikke konfigurer det faktiske utseendet til animasjonen, som gjøres ved å bruke @keyframes at-regelen som beskrevet nedenfor.
animasjonsnavn Angir navnet på @keyframes at-regelen som beskriver animasjonens keyframes.animation-duration Konfigurerer hvor lang tid en animasjon skal ta for å fullføre en syklus.
animation-timing-function Konfigurerer timingen for animasjonen; det vil si hvordan animasjonen går over gjennom nøkkelbilder, ved å etablere akselerasjonskurver.
animation-delay Konfigurerer forsinkelsen mellom tidspunktet elementet lastes inn og begynnelsen av animasjonssekvensen.
animation-direction Konfigurerer om animasjonen skal veksle retning på hver kjøring gjennom sekvensen eller tilbakestille til startpunktet og gjenta seg selv.
animation-fill-mode Konfigurerer hvilke verdier som brukes av animasjonen før og etter at den kjøres.
animation-play-state Lar deg pause og gjenoppta animasjonssekvensen. Definere animasjonssekvensen ved hjelp av nøkkelbilder
Når du har konfigurert animasjonens timing, må du definere utseendet til animasjonen. Dette gjøres ved å etablere to eller flere nøkkelbilder ved å bruke @keyframes at-regelen. Hvert nøkkelbilde beskriver hvordan det animerte elementet skal gjengis på et gitt tidspunkt under animasjonssekvensen.
Siden tidspunktet for animasjonen er definert i CSS-stilen som konfigurerer animasjonen, representerer nøkkelbilder en CSS-datatype en prosentverdi. Det brukes ofte til å definere en størrelse i forhold til et elements overordnede objekt. Mange egenskaper kan bruke prosenter som bredde-høyde-marginutfylling og skriftstørrelse.>
@keyframes skyv inn ( fra ( margin-venstre: 100 %; bredde: 300 %; ) til ( margin-venstre: 0 %; bredde: 100 %; ) )
Larven og Alice så på hverandre en stund i stillhet: til slutt tok Larven vannpipen ut av munnen, og henvendte seg til henne med en sløv, søvnig stemme.
Bruker animasjonsstenografi
Animasjonsstenografien er nyttig for å spare plass. Som et eksempel, regelen vi har brukt gjennom denne artikkelen:
P ( animasjon-varighet: 3s; animasjonsnavn: slidein; animasjon-iterasjon-antall: uendelig; animasjonsretning: alternativ; )
Kan erstattes av
P ( animasjon: 3s uendelig alternativ lysbilde; )
Angi flere animasjonsegenskapsverdier
CSS-animasjonens langhåndsverdier kan godta flere verdier, atskilt med komma - denne funksjonen kan brukes når du vil bruke flere animasjoner i en enkelt regel, og angi separate varigheter, iterasjonstall osv. for de forskjellige animasjonene. La oss se på noen raske eksempler for å forklare de forskjellige permutasjonene:
I dette første eksemplet har vi tre animasjonsnavn satt, men bare én varighet og iterasjon teller. I dette tilfellet får alle tre animasjonene samme varighet og antall iterasjoner:
Animasjonsnavn: fadeInOut, moveLeft300px, sprett; animasjon-varighet: 3s; animasjon-iterasjon-antall: 1;
I dette andre eksemplet har vi tre verdier satt på alle tre egenskapene. I dette tilfellet kjøres hver animasjon med de tilsvarende verdiene i samme posisjon på hver eiendom, slik at for eksempel fadeInOut har en varighet på 2,5 s og et iterasjonstall på 2 osv.
Animasjonsnavn: fadeInOut, moveLeft300px, sprett; animasjon-varighet: 2,5s, 5s, 1s; animasjon-iterasjon-telling: 2, 1, 5;
I dette tredje tilfellet er det spesifisert tre animasjoner, men bare to varighets- og iterasjonstellinger. I slike tilfeller der det er ikke nok verdier for å gi en egen verdi til hver animasjon, verdiene går fra start til slutt. Så for eksempel får fadeInOut en varighet på 2,5 s og moveLeft300px får en varighet på 5 s. Vi har nå kommet til slutten av de tilgjengelige varighetsverdiene, så vi starter fra begynnelsen igjen - sprett får derfor en varighet på 2,5 s. Iterasjonstallene (og eventuelle andre egenskapsverdier du angir) vil bli tildelt på samme måte.
Animasjonsnavn: fadeInOut, moveLeft300px, sprett; animasjon-varighet: 2,5 s, 5 s; animasjon-iterasjon-antall: 2, 1;
Bruke animasjonshendelser
Du kan få ekstra kontroll over animasjoner – samt nyttig informasjon om dem – ved å benytte deg av animasjonshendelser. Disse hendelsene, representert av AnimationEvent-objektet, kan brukes til å oppdage når animasjoner starter, avsluttes og starter en ny iterasjon. Hver hendelse inkluderer tidspunktet da den skjedde, samt navnet på animasjonen som utløste hendelsen.
Vi vil endre glideteksteksemplet for å gi ut litt informasjon om hver animasjonshendelse når den inntreffer, slik at vi kan se hvordan de fungerer.
Legger til CSS
Vi starter med å lage CSS for animasjonen. Denne animasjonen vil vare i 3 sekunder, kalles "slidein", gjenta 3 ganger, og veksle retning hver gang. I @keyframes manipuleres bredden og margin-venstre for å få elementet til å gli over skjermen.
Slidein ( animasjon-varighet: 3s; animasjonsnavn: slidein; animasjon-iterasjon-antall: 3; animasjonsretning: alternativ; ) @keyframes slidein ( fra ( margin-venstre:100%; bredde:300% ) til ( margin -venstre:0%;bredde:100%;
Legger til lytterne til animasjonshendelsen
Vi bruker JavaScript-kode for å lytte etter alle tre mulige animasjonshendelser. Denne koden konfigurerer våre hendelseslyttere; vi kaller det når dokumentet først lastes inn for å sette opp ting.
Var element = document.getElementById("watchme"); element.addEventListener("animasjonsstart", lytter, falsk); element.addEventListener("animasjonend", lytter, falsk); element.addEventListener("animasjoniterasjon", lytter, falsk); element.className = "slidein";
Dette er ganske standard kode; du kan få detaljer om hvordan det fungerer i dokumentasjonen for eventTarget.addEventListener() . Det siste denne koden gjør er å sette klassen på elementet vi skal animere til "slidein"; vi gjør dette for å starte animasjonen.
Hvorfor? Fordi animationstart-hendelsen utløses så snart animasjonen starter, og i vårt tilfelle skjer det før koden vår kjører. Så vi starter animasjonen selv ved å sette klassen til elementet til stilen som blir animert i ettertid.
Mottak av hendelsene
Hendelsene blir levert til listener()-funksjonen, som er vist nedenfor.
Funksjon lytter(event) ( var l = document.createElement("li"); switch(event.type) ( case "animationstart": l.innerHTML = "Startet: medgått tid er " + event.elapsedTime; break; case " animationend": l.innerHTML = "Avsluttet: medgått tid er " + event.elapsedTime; pause; case "animationiteration": l.innerHTML = "Ny loop startet på tidspunktet " + event.elapsedTime; pause; ) document.getElementById(" output").appendChild(l); )
Denne koden er også veldig enkel. Den ser ganske enkelt på event.type for å finne ut hvilken type animasjonshendelse som skjedde, og legger deretter til et passende notat til elementet representerer en uordnet liste over elementer, vanligvis gjengitt som en punktliste.">
- (uordnet liste) vi bruker til å logge disse hendelsene.
- Startet: medgått tid er 0
- Ny sløyfe startet klokken 3.01200008392334
- Ny sløyfe startet klokken 6.00600004196167
- Avsluttet: medgått tid er 9.234000205993652
Utgangen, når alt er sagt og gjort, ser omtrent slik ut:
Merk at tidene er veldig nær, men ikke nøyaktig, de som forventes gitt tidspunktet som ble etablert da animasjonen ble konfigurert. Merk også at etter den siste iterasjonen av animasjonen, sendes ikke animasjonsiterasjonshendelsen; i stedet sendes animasjonsend-hendelsen.
HTML-en
Bare for fullstendighetens skyld, her er HTML-en som viser sideinnholdet, inkludert listen der skriptet setter inn informasjon om de mottatte hendelsene:
Se meg bevege meg
Dette eksemplet viser hvordan du bruker CSS-animasjoner til å lage H1 elementer beveger seg over siden.
I tillegg sender vi ut litt tekst hver gang en animasjonshendelse utløses, slik at du kan se dem i aksjon.
Og her er live-utgangen.
Note: Last inn siden på nytt for å se animasjonen, eller klikk på CodePen-knappen for å se animasjonen i CodePen-miljøet.
Hvordan jobbe
