W
ith so many great JS tools
handling SVG animation,
it seems users sometimes
shy away from harnessing
the power of CSS alone. Let’s break down
an example I’ve created at CodePen –
an animated treatment of an SVG logo
created by co-worker and design maestro
Fernando Machuca – and get a feel for
some underappreciated capabilities of
CSS (https://codepen.io/cobra_winfrey/pen/
PoYRwpE).
I’ve first set up the scene using Flexbox
to centre the wrapper containing my
SVG logo. The animation opens with
a pseudo-element drawing in a neat
horizontal line from the right, in order
to offset the heavier animations that
will appear to the left. We’ll use simple
transform properties to adjust horizontal
scale, setting our transform-origin to the
right to tell our line which way we’d like
it to draw.With so many
feature-rich JS libraries
emerging to handle
interface animations, it’s
easy to forget how much
CSS offers us. Adam Kuhn
shows you a few advanced
properties and techniques
Create CSS animations