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

20 animerte og interaktive infographics du må se

Alle elsker infographics, sikkert, men statisk infographics er litt gammel hatt nå. Med så mange infographics der ute, er det lett å overse mange infographics med godt innhold bare fordi de bare ikke skiller seg ut fra resten av pakken. Og hvis du er en designer, har du sannsynligvis racked hjernen din, og prøver å finne ut hvordan du tiltrekker seere og oppretter infografer som skiller seg ut fra resten.Vel,

(Tekniske og design tips)

45 Julegavepakker Ideer for din inspirasjon

Når vi handler på nettet, er det mulig å be om at gaver skal gis innpakket eller leveres i en generisk eller fin emballasje. Men hvis du er den typen som vil lage din egen personlige gaveinnpakket versjon, så trenger du ideer. Så vi skal gi deg 45 festlige og fancy ideer om hvordan du får din gave til å se pen og prepped for noen seriøs utpakking.I denne

(Tekniske og design tips)