Kontrollerer CSS3 Animasjon med trinn () Funksjon

Animasjon er en av de største funksjonene introdusert til CSS. Tidligere var web animasjon bare tilgjengelig i JavaScript eller Flash-området. Men i dag velger mange nettsteder å bruke CSS for å legge til subtil animasjon . I tidligere artikler har vi gått gjennom hvordan du gjør noen kule ting med CSS-animasjon som å legge til en markeringseffekt og legge til spretteffekt til noe.

I denne artikkelen vil vi igjen dykke inn i CSS animasjon. Denne gangen skal vi diskutere en CSS animasjonsfunksjon, steps(), som gjør det mulig for oss å kontrollere animasjonsbevegelsen - ikke freak ut, det er ikke så forvirrende som det høres ut. La oss ta en titt.

Så hva er det?

Normalt vil animasjonen i CSS gå rett fra start til slutt ved den angitte varigheten. steps() er en del av animasjonstidsfunksjonen. Det lar oss kontrollere animasjonen for å bevege seg gradvis. Det aller beste eksempelet som viser hvordan steps() virker, ville være bruken av et analogt klokke; klokken som er brukt, beveger seg ikke kontinuerlig, men bevegelsene splittes i trinn. Så la oss kopiere den med CSS animasjon og steps() .

Replikere bruken av et ur

La oss først legge til keyframes som vil dreie den brukte hånden til 360 grader; rotasjonen starter 90 grader (eller klokken 12). Merk at følgende kode kan trenge et prefiks ( -moz-, -o- og -ms- ) for å kunne jobbe på tvers av nettlesere.

 @ -webkit-keyframes rotasjon {fra {transform: roter (90deg); } til {transform: roter (450deg); }} 

Den andre hånden beveger seg jevnt hvert sekund og fullfører en 360 graders rotasjon på 60 sekunder. Dermed vil vi her angi animasjonsvarigheten i 60s og dette forteller nettleseren å fullføre den i 60 trinn med steps(60) som dette.

 . sekund (animasjon: rotasjon 60s trinn (60) uendelig; transformasjons-opprinnelse: 100% 50%; // stil dekorasjon bakgrunnsfarge: # e45341; høyde: 2px; margin-topp: -1px; posisjon: absolutt; topp: 50%; bredde: 50%; } 

Vi har opprettet to demoer for dette; en med steps() og en med linear . Du kan se de forskjellige trekkene fra dette skjermbildet nedenfor.

På dette punktet, forhåpentligvis, kan du finne ut og forestille deg hvordan steps() fungerer. For å se demoen i aksjon, følg denne linken nedenfor.

• Se demo
• Last ned kilde

Mer inspirasjon ...

I tillegg har vi samlet noen fantastiske eksperimenter og demonstrasjoner som utnytter steps() fra mange webutviklere. Sjekk dem ut, og jeg håper du kan få litt inspirasjon fra dem.

• Ren CSS3 skrive animasjon med trinn () av ​​Lea Verou
• Cat Walk av Rachel Nabors
• Ken Street Fighter II av David Walsh

Typografi 101: Serif vs Sans-Serif

På scenen for å velge skrifter, spør en designer ofte seg, "til Serif eller Sans-Serif"? Å velge typen skrift som skal brukes i et design er av største betydning, da det i stor grad påvirker lesbarhet, brukeropplevelse og designens generelle estetikk.Selv om, uansett hvor mye erfaring du har med typografi, kan du alltid sitte fast i serif vs. sans

(Tekniske og design tips)

10 (More) Cool Sykling Gadgets For Avid Cyclist

Vi er mer bevisst på vår helse nå mer enn noensinne, og en av de beste måtene å få litt trening i våre liv er å ta sykkelen ut for en tur. Grip sykkelen din ut av garasjen, gå en rolig syklus og nyt de fantastiske tingene som mor naturen har å tilby. Hvis du sykler ofte, er det noen ting som kan gjøre syklingopplevelsen mer behagelig og praktisk, og dagens innlegg handler om kule sykkelutstyr for å hjelpe deg med det.Alt fra en

(Tekniske og design tips)