Add animation to SVGwithCSS
Yourvalueswillbedifferenttominedependingon
theSVGyouareusing.Tofindyourvalue,useyour
preferreddevelopertoolsandincrease
‘stroke-dasharray’from0 untiltheentireshapeis
coveredbyonestroke.path.rectText {
opacity:0;
stroke-dasharray: 735;
animation: textDraw 4s
cubic-bezier(.56,-0.04,.32,.7) forwards;
animation-delay: 1s;
}14 .Firstlinedrawingkeyframe
Nowwehaveouroneverylargestrokethatcoversthe
entiretextpath,let’soffsetit byitsownlengthto
effectivelypushit away.Using‘stroke-dashoffset’forthe
samevalueasourdasharrayshoulddoit. Let’ssetthis
in ourfirstkeyframe.We’llalsomaketheshapefill
transparentandsetthestroketowhiteif it isn’talready.0%{
fill:rgb(255, 255,255,0);
stroke:#fff;
stroke-dashoffset: 800;width:1%;
}
to {
width:100%;
opacity: 1;
}
}11 .Thetextanimation
We’regoingtocreatea line-draweffectonourtext
thenusea filltofadein.Tosetupthetextanimation
wegiveit our‘textDraw’witha foursecondduration.
Thecubicbezierhasbeenmodifiedonthisstepto
giveit a slightlydifferentpaceofmovement.
path.rectText{
opacity:0;
animation: textDraw 4s
cubic-bezier(.56,-0.04,.32,.7)forwards;
}12 .Delaythestart
Ourtextneedstorunjustastherectanglehas
finishedfadingin.Becausetherectanglehasa one
secondduration,delaythestartofthetextanimation
bythattime.
path.rectText{
opacity:0;
animation: textDraw4s
cubic-bezier(.56,-0.04,.32,.7)forwards;
animation-delay: 1s;
}- Emulate line drawing
To get our line drawing effect we will use the
‘stroke-dasharray’ and ‘stroke-dashoffset’ parameters.
Onceyou’vemasteredthis
formofSVGanimationusing
just CSS, you’ll be able to
apply it to many areas of
your design. Limitations will
start to pop up when you
want a more complex way
of triggering the start of the
animation — creativity may
also lead you to require more
advanced functionality.
This is a fast-growing area
of web design and many
options exist. Anime.js is a
JavaScript animation library
with an array of features and
fantastic documentation. It
works with CSS and SVGs in
a similar way to what we’ve
covered, making it
the logical next step
following this.
Others include Lottie by
Airbnb, which lets you export
animations from Adobe After
Effects and use them on a
webpage with SVGs.The next level
Tutorials
opacity:1;
}15 .Drawthelines
Ourmiddlekeyframeappearsat40%throughthe
animation.Webringthestroke-dashoffsetbackto
zerosothedashcoverstheentirepath.Wecanre-add
thetransparentfillatthisstagetomakesurethefill
onlyappearsoncethedrawingis complete.40%{
stroke-dashoffset: 0;
fill:rgb(255, 255, 255,0.0);
}16 .Fillintheshape
Forthelastpartoftheanimation,wewillfilltheshape
in white.Allweneedtodoforthelastkeyframeis raise
thealphavalueofthefillcolour.Thiscreatesthe
fade-ineffectofthefill.100%{
fill:rgb(255,255,255,1);
stroke-dashoffset: 0;
opacity:1;
14 }No Illustrator,
no problem
If you don’t have Illustrator on hand to create
your SVGs, don’t worry. A free alternative is
available called Inkscape. It has all the essentials,
which can be used to follow this tutorial. Inkscape
adds a lot of unneeded data to the file, so use
SVGOMG to strip this out.tutorial ������������������������������������������������� 65