Share
Våre mobile nettlesere fortsetter å bli kraftigere og bedre på å vise oss fantastiske, vakre animasjoner. Når kombinert med layoutkraften til CSS, er det mulig å lage noe nydelig arbeid uten å bruke noen bilder i det hele tatt. Resultatet er skalerbar, rask lasting, og vel, imponerende å se.
La oss ta en titt på hvilke fantastiske ting folk lager og animerer med bare HTML og CSS.
Det skjer så mye her, det er vanskelig å tro at det bare er HTML og CSS! Roterende animasjoner og flere lagdelte bevegelser kombinerer slik at den ser ut som denne syklisten, og sykkelen er laget av gelé. Hyggelig bruk av BEM i klassenavn også!
Kombinere mange bevegelige deler kan gjøre et enkelt sett med HTML-elementer virke som en mer komplisert animasjon, og det er noe denne demoen gjør bra. Se hvordan de to planeter samhandler, mens løpende "partikler" bare er spredt nok til å virke tilfeldig.
Enkle farger kan ikke virke mye, men når de beveger seg, kan de formidle mange tegn. I dette eksemplet er et sett med semi-gjennomsiktige HTML-punktetiketter animert, og den resulterende stablede animasjonen er hypnotisk.
Vi trenger ikke alltid JPG eller PNG for å lage flotte bilder, og dette er et annet eksempel. En container div og fire andre er alt som trengs for å lage dette herlig lette lille iskrem-tema laster bildet. Den resulterende koden er mye mindre enn en animert GIF ville være.
Når du kombinerer kunstnerisk bruk av HTML-elementer med noen tegnfylte animasjoner, er dette resultatet. En utrolig jevn, men opptatt animasjon full av moro. Massiv respekt for Julia Muzafarova for hva som må ha vært utrolig fiddly å bygge alle de settene av keyframes. Mer enn noen få kaffe også!
Sammen med mange enkle HTML-elementer med en rekke subtile, morsomme animasjoner, har denne søvnige katten mye karakter. Dette eksemplet bruker Sass og variabler for å kontrollere animasjonen. Prøv å endre noen for å se hva som skjer!
Glatte animasjoner kan oppnås ved bruk av HTML og CSS, spesielt når vi følger noen grunnleggende prinsipper. Denne animasjonen holder antall elementer til et minimum, og stor bruk av transformasjoner.
Raske animasjoner kan legge til mye karakter når kombinert. I denne demonstrasjonen, se hvordan bobler og sprut blir koreografert sammen for å lage søt animasjon med en lykkelig svamp, alt uten bilder.
En rekke keyframe-animasjoner kan fortelle en historie eller hjelpe folk å forstå hva de ser på. Her ser vi åpne en konvolutt og få et brev.
Litt subtile bevegelser kan skape gode følelser av intensitet! Denne lasteren har en bil som ser ut som den går fort, alt skapt med noen elementer og CSS-animasjoner. Ingen bilder ville lastes raskt.
Takk som alltid for CodePen og de kreative sinnene bak disse demonene; de har sikkert gitt oss mye inspirasjon i disse animasjonseksemplene. Sjekk ut følgende innlegg for mer av det samme, og lær hvordan du lager dine egne CSS-animasjoner!
Accentsconagua