CSS Master

Figure 8.8. Our stroke-dasharray transition near its end

Unfortunately,there'salimittohowmuchwecananimateusingCSS.Forinstance,

we'reunabletouseCSStoanimatetheshapeofapathtomakeastarintoahexagon.

Forthat,we'dneedtouseaJavaScriptanimationlibrary,suchasBonsai.js^11 ,or

SynchronizedMultimediaIntegrationLanguage(SMIL).^12 Unfortunately,SMIL

lacksanysupportinInternetExplorerandisdeprecatedinChrome45+.

Using SVG with Media Queries

WithHTMLdocuments,wemightshow,hide,orrearrangepartsofthepagebased

ontheconditionsoftheviewport.Ifthebrowserwindowis 480 pixelswide,for

example,wemightshiftournavigationfromahorizontalonetoaverticalcollapsible

list.WecandoasimilarjobwithmediaqueriesandSVGdocuments.Considera

logo,suchasthatofthefictitiousHexagonWebDesign&DevelopmentinFigure8.9.

(^11) https://github.com/uxebu/bonsai
(^12) http://www.w3.org/TR/SMIL/
320 CSS Master