CSS Master

}

.twinkle {

animation: twinkle 1.5s infinite forwards ease-in;

}

Herewe'vejustusedtheSVG-specificpropertyfill-opacity.AswithCSS,ifthe

valueofanSVGstylingpropertycanbeinterpolated,itcanalsobeanimatedor

transitioned.YoucanseetwodifferentpointsoftheanimationinFigure8.7.

Figure 8.7. Our pulsing star at two different points in the animation

Let'slookatanotherexample.Thistimewe'llcreateadrawingeffectbytransitioning

thestroke-dasharrayproperty.Here'sourSVGdocument:

08-svg/svg-wipe-in.html (excerpt)

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"

➥xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 200 200" enable-background="new 0 0 200 200">

<circle fill="transparent" stroke-width="16" cx="101.3"

➥ cy="96.8" r="79.6"/>

</svg>

Weintroducedstroke-dasharraywithoutexplainingwhatitdoes.Thestroke-

dasharraypropertyacceptsacomma-separatedlistoflengthorpercentagevalues

tocreateadashedpattern.Odd-numberedvaluesdeterminethedashlength.Even-

318 CSS Master