Curious to dig into more CSS animation tips
and tricks? Here are a few great resources to
get you started:-------------------------------------------THE UI ANIMATION
NEWSLETTER
https://valhead.com/newsletter/
Each week, interface animation rockstar Val
Head doles out helpful hints, resources and
inspiration. She’s also written an outstanding
book on the topic titled Designing Interface
Animation (https://netm.ag/2CAVIsz).-------------------------------------------CODEPEN CHALLENGES
https://codepen.io/challenges/
Ever feel as though your well of inspiration
has run dry? Want to experiment with new
techniques but not sure where to start?
CodePen’s weekly challenge prompts offer a
fun way to build your skills.-------------------------------------------CSS ANIMATION WEEKLY
https://cssanimation.rocks/weekly/
A weekly roundup of hand-picked animation
articles and demos, all strictly focused on the
capabilities of pure CSS.-------------------------------------------TINY WEB ANIMATION
NEWSLETTER
https://tinyletter.com/animation
A – you guessed it! – tiny newsletter
featuring only three impressive recent web
animation demos, curated by web animation
creative wizard Steve Gardner.-------------------------------------------ANIMATION AT WORK BY
RACHEL NABORS
https://animationatwork.com/
Another excellent entry in the A Book Apart
series: there’s also a likewise-named Slack
channel full of helpful animation enthusiasts.Resources
height: calc(var(--size) * 1px);
width: calc(var(--size) * 1px);
}It’s important to note the order in which
he defines these variables, as the latter
two are dependent on the --height variable
within their calc() functions. The result
of combining these custom properties
means the higher the box jumps, the
more it squashes and stretches, offering a
natural, organic feel to the animation. For
more information on natural animation
techniques such as squash and stretch, I
highly recommend checking out Disney’s
12 Principles of Animation, which can be
found in the excellent book The Illusion of
Life by Ollie Johnston and Frank Thomas.
We’ve seen how Tompkins used radio
buttons to manipulate label styles, so
next we’ll see how he updates several
aspects of the animation by simply
applying the same technique to the
--height custom property.#jump:checked ~ .ground .jump {
--height: 1; }
#higher:checked ~ .ground .jump {
--height: 2; }
#highest:checked ~ .ground .jump {
--height: 3; }With a simple incremental update to
this lone variable, multiple transform
properties within the timeline are
adjusted, offering an efficient and
consistent approach to maintaining and
updating animations with specificity as
broad or narrow as necessary.SVG in CSS: Round 2
As we have touched upon, the
intersection of SVG and CSS offers
us many advanced JS-free animation
options – let’s now take a look at setting
up complex custom motions using
offset- distance and offset-path with this
example by Dan Wilson (https://codepen.
io/danwilson/pen/vxQKvm).
As you can see, the base HTML is
relatively light: a wrapping element, an
element to be animated and an SVG. With
all of this in place, the remaining magic
is all in the CSS.Wilson has drawn a fairly rudimentary
path here and if you need a simple tool
to generate your own, CodePen user
Anthony Dugois has created a web-
based path builder (https://codepen.io/
anthonydugois/pen/mewdyZ). If you’d
like to follow Wilson’s example, you
may want to leave the editor open after
creating your path: he’s used CSS to
animate the path properties with a
morph-style transition and as we touched
on previously, this requires at least
two separate states for the path with
matching points and handles..mover {
offset-path: path(var(--path1)); animation:
move-it 19000ms 0ms infinite alternate
ease-in-out,
change-it 4000ms 0ms infinite alternate
ease-in-out; }@keyframes move-it {
100% { offset-distance: 100%; }
}
@keyframes change-it {
100% { offset-path: path(var(--path2)); }
}
Here again, he’s using CSS custom
properties to store his SVG path and
offset-path values, -- path1 and --path2Above Dan Wilson has a great example of custom motionsFEATURES
Create CSS animations