Myname's Steven, as I wasjustintroduced, and I'm gonnabetalkingaboutCSSanimationongoingbeyondjustusingtransitions.
I'm soexcited.
Myname's StevenRoberts.
YoucanfollowmeonTwitterandCopen.
Thelinkswereacrossthebottomthewholeway.
A voteinthisindustryforaroundabout 10 years.
I did a lotofagencyworkandthenhavesincemovedonto a companycalledAssembler, where I neverdo a lotofdesigndevelopmenton D.
U x orsortoflookafterallofthat.
Butenoughaboutme, andthat's notwhyyou'rehere.
Sowhybothertoanimateitall?
Well, animationcouldbeusedfor a numberofreasons.
Useon a missiontodelightyouruserssosimpleanimationscanreallycreate a memorableexperiencecangetpeoplecomingbacktoyourwebsite, toothiotoseethethingsthatyou'vedone.
Andyoucanreallyjustgrabpeople's attentionwithreallynicesimpleanimationsforuseon a missiontoinform.
Thisisespeciallyusefulwhensubmittingformsarepullingdowndataoranythinglikethat, becauseyou'llbeabletogive a visualindicationthatsomething's happeninginthebrowser.
CSSisperformancesymbolandpowerful, andyoucanseetheirperformancehas a littleAsterixnexttoit.
That's becauseweonlyhave a fewsavepropertiesthatwethatwecananimateinCSS, andthere's a transformeropacityinfilter.
Andwhilethatmayseemquitelimiting, there's quite a lotyoucandowithjustthosepropertiesonbitsworthknowingaswellthatinthefuturethiswon't beasmuchof a problem.
Turninginto a crossismadeupoffourlines, sothethemiddlebitistwolinesstackedontopofeachother.
Sothenwhenwehoverover, wehidethetopandbottomlinesandthentransformthemiddleline's ourovertocareeracrosssimpleonemorequickexample s Oh, thesearejustsomecardsthatyoumighthaveonanytypicalwebsiteonthebottomcornerisgonnabeusedtotoshow a categoryaretoshow a nameorsomethinglikethat.
Andaswehoveroverthat's revealed.
Soagain, thisisusingtransitionsnowanimation.
Souponhover, we'regoingtochangetheborderwidthoftheafterAndiopacityoffbeforeSotheafteristthe e rectangularcorner.
Wehave, ahkeyframeanimationcalledScrollOnfrom 0 to 20%.
We'renotgoingtodoanything.
Andthenfrom 20% to 100% we'regonnamovealongthe y axis 36 pixelsandthenwe'realsogoingtobelonggettheship, whichisbystretchingit a lotintheUAEaccessusingscale.
And 1274516 Nowgettingusedsomethinglikesketcharesomesortofvectoratittheresomewherewaywhereitcanoutputthisforyousothatyoudon't havetowriteyourselfallcredittoyou.
Ifyoucanwrite a heartinSPDwithoutusinganeditorsothatwehaveourshipexplode, thatisan s Fiji.
Andthenwe'regonnaaddthecirclesinafterwards.
We'lldothisjustbyhundbecausethisisreallysimple.
It's justeightcircles s o.
Wejustcreate a groupforthem, positionthatgroupinthecenterandthenjustcreateeightcircles.
See, we'vecreated a 50 pixelgapenthan a 50 pixelsstrokeandthen a 50 pixelgap, anditwilljustrepeatinfinitely.
Soifwetakethatstrokedashoranincreaseittobethefullcircumferenceofthecircle, whichinthiscaseis 9 40 Wehave a strokethatcoverstheentirecircle, butwealsohave a gapthatwillcovertheentirecircleaswell.
Andthenwhenwerunthatyoucanseewe'vedrawntheoutlineofthecirclethat's literallyallloved, andthereisjustapplied a differentdifferentdurationsanddifferentdelaysandthingslikethat.
Andthenthewholethinggetsdrawnonload.
Soonemoreexample.
Thisiswherethetalkreallycamefrom.
About a year, yearand 1/2 ago, I wroteanarticleforWebDesignerMug, andit's partofthat.
Wewentlookedat a wholebunchofanimationsfromaroundthewebthatwe'redoingeitherusingflashourJavaScriptorsomethinglikethatwhenwelooktoseeifwecouldrecreatethemallinCSS.