After this simple animation we get
a bit more complex: using clip-path
properties to reveal each section of the
SVG. Clip-path offers us an excellent
tool for ‘reveal’ type animations and
even enables relatively complex shape-
morphing; a great resource for helping
draw your paths is Bennett Feely’s
‘Clippy’ (http://bennettfeely.com/clippy/).
As you’ll see in the following CSS
sample, the final clip-path boundaries
slightly exceed the container’s
boundaries; a key factor to be mindful of
when using clip-path is that it will always
hide any overflow from the defined path,
sometimes requiring compensation for
irregular elements..svg-path{
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
animation:clip-in1 1s cubic-bezier(0.175,
0.885, 0.32, 1.275) 1 forwards;
@keyframes clip-in1{
to{
clip-path: polygon(-20% -20%, 120% -20%,
120% 120%, -20% 120%); }
} }One thing you might notice straightaway
is the use of cubic-bezier to handle
the easing of our animation. Whenconstructing animations, very few factors
can better create a natural connection
to your user than a well-selected easing
function and I find it helpful to keep a
library of frequently used values handy.
(You can build and test your own at https://
cubic-bezier.com/ as well.)
A further look into this animation
shows we’ve set a duration of one
second, set the animation iteration
count to play only once and told our
animation-timing-function to play forwards
without any looping or returning to the
initial state.
Another key to imparting fluidity is
the addition of a slight offset to the start
times of each animation. Often this is
a great use case for CSS preprocessors
like Sass or Less, which can enable you
to easily iterate through elements and
incrementally set animation delays.
When you’re animating elements meant
to be perpetually moving, it’s sometimes
even helpful to use negative values for
timing offsets.
If it hasn’t become apparent at this
point, very few technical aspects are
more critical to a well-constructed
animation than timing and as such I
find that when constructing animated
elements, I invest the vast majority ofmy time reviewing and tweaking easing,
duration and offsets.
With timing considerations out of
the way, let’s take a look at chaining
animations and animating our SVG
path properties, creating a morph effect
without a trace of JS. It looks something
like this:animation:clip-in1 1s cubic-bezier(0.175,
0.885, 0.32, 1.275) 1 forwards, growl 1s
ease-in-out 2 alternate;
animation-delay:1s, 1.3s;
@keyframes growl{
0%{ d:
path(“M35.3,2.9l-1.5,0.4l-0.6,0.2c0,0-0.4,0.1-
0.4,0.1l-1.6,0.4c-0.3,0.1-0.7,0.2-0.9,0.2l0,0
c-0.4,0.1-1.4,0.4-0.1,0l0,0c0.1,0,2.6-0.7,3-
0.8l1.3-0.3L34.8,3C36,2.7,35.2,2.9,35.3,2.
9z”);
} 14.99%{
d: path(“M35.3,2.9l-1.5,0.4l-0.6,0.2c0,0-
0.4,0.1-0.4,0.1l-1.6,0.4c-0.3,0.1-
0.7,0.2-0.9,0.2l0,0 c-0.4,0.1-1.4,0.4-
0.1,0l0,0c0.1,0,2.6-0.7,3-0.8l1.3-
0.3L34.8,3C36,2.7,35.2,2.9,35.3,2.9z”);
} 15%{
d: path(“M35.3,2.9l-1.5,0.4l-0.6,0.2c0,0-
0.4,0.1-0.4,0.1l-1.6,0.4c-0.3,0.1-
0.7,0.2-0.9,0.2l0,0 c-0.4,0.1-1.4,0.4-
0.1,0l0,0c0.1,0,2.6-0.7,3-0.8l1.3-
0.3L34.8,3C36,2.7,35.2,2.9,35.3,2.9z”);
} 25%{
d: path(“M36.1,3.6l-1.3,2.3l-0.8-0.2c0,0-
0.5,0-0.6,0L31.6,7c-0.3,0.3-0.8,0.3-
1.2,0.1l0,0 c-0.6-0.4-2.2-1.5-0.8-2.5l0,0c0.1-
0.1,3-1.6,3.5-1.4L34.4,2l0.5-
0.4C36.3,1,35.6,2.4,36.1,3.6z”);
} 100%{
d: path(“M36.1,3.6l-1.3,2.3l-0.8-0.2c0,0-
0.5,0-0.6,0L31.6,7c-0.3,0.3-0.8,0.3-
1.2,0.1l0,0 c-0.6-0.4-2.2-1.5-0.8-2.5l0,0c0.1-
0.1,3-1.6,3.5-1.4L34.4,2l0.5-
0.4C36.3,1,35.6,2.4,36.1,3.6z”);
} }As you might have noticed, we’re ever
so slightly adjusting our SVG path with
only CSS. Getting this to work correctly
can be a little tricky and will require
fallbacks for IE/Edge, which don’t
currently support these properties. What
I’ve done here is create two states for
the bear: one standing firm, the other
with its head upturned, growling. WhenAbove The bear has two states – one static and the other with its head up, growling. CSS can handle the transitionFEATURES
Create CSS animations