Hoe om goeie gebruik van CSS3 Animasies te maak: Tutoriaal, Voorbeeldkodes en Voorbeelde

Artikel geskryf deur:
  • Website Design
  • Opgedateer: Aug 28, 2013

As ons JS en jQuery gebruik, het ons volle beheer oor die animasies en kan ons fantastiese effekte skep, maar die prys is redelik hoog. Verwerkingstyd, kruisblaaierversoenbaarheid (bv. Mobiele toestelle is baie anders as dit by JS kom) en die kodekompleksiteit self is punte wat ons in gedagte moet hou terwyl geanimeerde koppelvlakke geskep word.

So, vandag sal ons sien hoe om JS te voorkom deur CSS Animasies en Transitions te gebruik. Ons bespreek van die baie basiese stappe na 'n paar fantastiese effekte, soos trekklavierpanele en geanimeerde sub-spyskaarte.

Gryp 'n sitplek, jou notaboek en 'n regte blaaier (enigiets behalwe IE) en laat ons begin.

Opwarm

Ons het 'n hele paar voordele (en nadele as alles in ons lewens) in die gebruik van CSS animasies. As jy dit aan jou baas of kliënt moet verkoop, moet jy dit in gedagte hou:

  • Hulle is potensieel vinniger, aangesien hulle van hardewareversnelling gebruik kan maak (soos HTML5 implementasies)
  • Hulle sal beter presteer in mobiele toestelle en benodig nie spesifieke kode om aanraking gebeure op te spoor nie
  • JS moet deur die leser geïnterpreteer word en die moontlikhede om die blaaier te breek is baie groter. So wanneer CSS misluk, slaag dit stil, terwyl JS die hele bladsy kan breek
  • Hulle het nogal 'n goeie blaaierondersteuning (hierdie webwerf sal jou help om spesifieke statistieke daaroor te kontroleer: http://caniuse.com/#search )

Voorbeelde van CSS3 Animasies

Laat ons kyk na 'n paar pragtige animasies wat in pure CSS gemaak is voordat ons begin met die vleis van hierdie pos.

Suiwer CSS Twitter misluk

Animated Failed Whale

Gemaak deur Steven Dennis, sien dit in aksie.

Suiwer CSS Scrolling Coke Can
CSS 3 Animasie Voorbeelde: Scrolling Coke Can

Gemaak deur Romeinse Cortes, sien dit in aksie.

Suiwer CSS Walking Man

CSS 3 Animasie Voorbeelde: The Walking Man

Gemaak deur Andrew Hoyer, sien dit in aksie.

Om jou hande vuil te maak

Kom ons begin die kode. Ons sal baie die CSS-pseudoklasse gebruik om die animasie te aktiveer. Om eerlik te wees, beveel baie ontwikkelaars aan dat jy JS gebruik om animasies te aktiveer en deaktiveer, maar hier sal ons die makliker manier sien:

# toets (agtergrond: rooi; } # toets: hover (agtergrond: groen; } # toets: aktief (agtergrond: blou; } # toets: teiken {agtergrond: swart; }

Ons het 'n paar ander pseudoklasse om te gebruik, maar jy het die idee! So hier is wat gebeur as jy op die #test-element klik (as dit 'n skakel is):

  • Normale toestand: Agtergrond sal rooi wees
  • Beweeg: Wanneer die muis elemente binnegaan, sal dit 'n groen agtergrond hê
  • Aktief: As jy die wyser daarop klik en terwyl die muisknop nog gedruk word, sal die agtergrondkleur blou wees
  • Teiken: As die huidige bladsy die # toets in die URL het, sal hierdie element swart wees

Elk van hierdie kan gebruik word vir CSS animasies, byvoorbeeld jy kan 2 skakels skep om die CSS animasie te aktiveer en deaktiveer deur van die teiken pseudo-element gebruik te maak met hierdie kode:

<a href='#test'> aktiveer </ a> <a href='#'> deaktiveer </ a>

CSS Transitions

CSS-oorgang sal van die begin tot die einde van die toestand glad verander. So definieer jy in die hoof selector die gebruik van die "oorgang" eiendom die tyd en elke eiendom wat geraak gaan word en hoe die animasie moet wees. Kom ons kyk na 'n voorbeeld:

.test {/ * oorgang-eiendom duur tyd-funksie, * / kleur: blou; oorgang: kleur 2s, font-grootte 2s gemak-out; }. toets: hover {kleur: rooi; }. toets: aktief {font-size: 200%; }

As jy die toets element beweeg, verander dit geleidelik die kleur van blou na rooi (wat is 'n lekker palet, hoe?). As jy op die element klik, sal die fontgrootte geleidelik toeneem na 200% van die standaard lettergrootte.

Ons het ook die "oorgang tyding" eiendom, wat as 'n gemak is, dat hoe die "tyd" beskikbaar vir die animasie bestee sal word. Hier is die moontlike waardes:

  • Lineêr: Dieselfde spoed van die begin tot die einde
  • Ease-in: Stadige begin
  • Uitkoms: Stadige einde
  • Gemak: Stadige begin, vinnig in die middel, dan stadig einde
  • Gemak-in-out: Stadige begin, stadige einde
  • Kubieke-bezier (a, b, c, d): Aangepaste spoed

Die kubieke Bezier funksie skep 'n persoonlike animasie met 4 nommers wat wissel van 0 na 1, wat die wiskundige kurwe vir animasie spoed X duur verteenwoordig.

Vir beter blaaierversoenbaarheid, moet u die voorverkopervoorvoegsels vir operas, Firefox en webkit soos volg gebruik:

div {width: 400px; -oor-oorgang: breedte 2s; -moz-oorgang: breedte 2s; -webkit-oorgang: breedte 2s; oorgang: breedte 2s; }

U kan ook gebruik maak van die media-navrae om verskillende oorgange te definieer afhangende van die wydte van die blaaier (mobiele toestelle, tablette). Dit is 'n eenvoudige voorbeeld:

lyf {font-size: 1em; } @media skerm en (maksimum wydte: 800px) {liggaam {font-grootte: 0.8em; }} @ media skerm en (maksimum wydte: 400px) {liggaam {lettergrootte: 0.7em; }}

Hier word die lettergrootte skielik verander wanneer u die leser breedte verhoog. Hierdie kode sal voorkom dat dit gebeur, wat 'n veel gladder oorgang gee:

liggaam {-o-oorgang: lettergrootte. 5s lineêr; -moz-oorgang: lettergrootte .5s lineêr; -webkit-oorgang: lettergrootte .5s lineêr; oorgang: lettergrootte .5s lineêr; }

Jy kan dit ook gebruik as jy verskillende voorstellings of groottes vir portret / landskap het, as jy wydtes, kleure, paddings, menu-vertoning wil verander.

CSS Animation - Die Real Fun Begin

Die animasie is 'n volgorde van oorgange gedefinieer in 'n enkele selector. Om CSS animasies te definieer, moet jy 2 stappe volg.

Die @keyframe-reël word gebruik om 'n reeks animasie stappe te definieer, en dit word gedefinieer deur 'n unieke naam en die style wat beskryf hoe hierdie animasie werk. Soos gewoonlik sal ons 'n paar verskaffervoorvoegsels nodig hê, soos in hierdie voorbeeld:

/ * dieselfde kode vir elke verskaffer * / @ -o-keyframe my-animasie {... @ -moz-keyframe my-animasie {... @ -webkit-keyframe my-animasie {... / * animasie naam * / @ keyframe my-animasie {/ * raam keurder * / 0% {/ * raamstyl * / Links: 0px; Top: 0px; } 25% {Links: 200px; Top: 0px; } 50% {Links: 200px; Top: 200px; } 75% {Links: 0px; Top: 200px; } 100% {Links: 0px; Top: 0px; }}

So, elke styl word gedefinieer deur die raam / tydraamwerk (soos dié rame van 'n flitsanimasie) as 'n persentasie en die style wat daar toegepas moet word. Hierdie keyframe sê byvoorbeeld dat die element na links beweeg, dan bo, dan regs, dan onder.

Nadat u die stap 1 gevolg het en u sleutelkram geskep het, kan u dit eintlik op 'n element toepas. Dan sal ons omtrent dieselfde logika gebruik as wat ons met die CSS-oorgang gedoen het. Die verskil is dat ons oorgang nou 'n baie komplekse animasie is.

Om dit toe te pas, gebruik ons ​​die animasie eiendom en dit het 7 sub-eienskappe:

  • Naam: daardie unieke identifiseerder
  • Duur: Hoe lank sal dit neem van 0% na 100%
  • Timing-funksie: pretty much dieselfde as die oorgangstydfunksie
  • Vertraging: Hoe lank sal dit neem om die 0% te begin?
  • Herhalingstelling: Hoeveel herhalings sal ons hê ('oneindig' vir 'n oneindige lus)
  • Rigting: normale of alternatiewe (omgekeerde)
  • Play-state: as die animasie hardloop of onderbreek word

Dit sal ons animasie toepas op die #test-element wanneer dit die doelwit van die bladsy is:

#test: target {/ * animasie-naam | duur | timing-funksie | vertraging | iterasie-telling | rigting | speel-state * / animasie: my-animasie 10s lineêre 0s oneindige normale hardloop; }

Met hierdie in gedagte kan ons 'n paar wonderlike voorbeelde skep.

CSS Only Accordion

Ons skep opvouwbare panele wat gebruik maak van die CSS animasies. Hier is die basiese HTML struktuur:

<div class = "accordion"> <a href="#tab1"> Tab 1 </ a> <div id = "tab1"> <p> TEXT 1 </ p> </ div> <a href = "# tab2 "> Tab 2 </ a> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> Tabblad 3 </ a> <div id =" tab3 "> <p> TEXT 3 </ p> </ div> </ div>

Dit sal net die panele skep en die skakel wat elkeen van hulle sal aktiveer. En hier is waar die toorkuns gebeur:

/ * Enige div wat binne-in die trekklavier is * / .accordion div {/ * is versteek by verstek * / hoogte: 0; oorloop: verborge; / * die swart magie * / oorgang: hoogte 1s; } / * wanneer die genoemde div die teiken is * / .accordion div: teiken {/ * hoogte: outomaties sal nie werk nie, maar dit sal goed werk * ​​/ hoogte: 80px; }

Pretty simple, huh? En jy het jou hele lewe deur JS hiervoor gebruik? :)

CSS Only Menu met Submenu's

En dit is nog 'n nogal eenvoudige aansoek. U het beslis 'n navigasiekieslys in u werf, en ons moet dikwels submenu's daar gebruik. Die beste manier om items te wys en te versteek, gebruik jQuery, reg? Wel, dink weer nadat jy hierdie kode toets het:

<nav> <ul> <li> <a href='#item1'> Item 1 </ a> <div> <ul> <li> <a href='#item11'> Item 1.1 </ a> </ li> <li> <a href='#item12'> Item 1.2 </ a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Item 2 </ a> <div> <ul> <li> <a href='#item21'> Item 2.1 </ a> </ li> <li> <a href='#item22'> Item 2.2 </ a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

En die towenaar begin hier:

'n (/ * maak net die skakels 'n bietjie beter * / vertoon: blok; vulling: 4px; } nav {text-align: center; } / * enige spyskaart (insluitende die hoof een) * / nav ul {vertoon: inlynblok; lys-styl: geen; } nav> ul> li (/ * horisontale items (vertikaal sal ook goed werk) * / float: left; } nav li div {/ * enige sub-spyskaart ineenstort * / hoogte: 0; oorloop: verborge; / * Houdini gevoelens * / oorgang: hoogte 1s; } nav li: hover> div {hoogte: 56px; }

Opsomming

Dit is beslis net 'n beginnersgids. Daar is baie ander koel effekte wat gedoen kan word met behulp van CSS net animasies en baie dinge beslis nog te kom.

So, het jy dit al voorheen gebruik? Kan jy aan nog 'n goeie aansoek vir CSS-animasies dink? Deel jou gedagtes deur die kommentaar te gebruik!

Oor Rochester Oliveira

Ek is 'n webontwerper en entrepreneur van Itajubá (MG), Brasilië. Ek is lief vir skryf oor obskure onderwerpe en doen 'n paar cool dinge.