net - UK (2020-01)

creating the SVG in your application of
choice, it’s critical to maintain the same
number of path points and handles, only
manipulating positions from state one to
state two. You can chain as many states
as you’d like but it should be noted that
this generally only works as expected
when utilising the linear easing function.
After exporting the SVG states, you can
then harness CSS to smoothly transition
between them.
Another thing you might notice is I’ve
chained two animations here and set
separate delay functions for each in order
to offset them to suit my needs. Note that
chaining animations that utilise the same
CSS properties will cause the last defined
animation’s properties to override the
prior animations, as might be expected of
the cascade.
Lastly, we use some more transform
animations to scale out from the bear
and utilise the animation we opened
with coupled with a new transform-origin
to draw our line to the right this time.
As we pull away, we use yet another
transform animation to pop the logo text

• currently hidden by the SVG bounding
  box – into place. Each letter’s start time
  is offset with incremental delays and
  again leverages cubic-bezier to provide an
  elastic springiness.

New possibilities with
CSS custom properties
While lacking compatibility with
some legacy browsers (you know the
ones – and, yes, it’s still important to
write fallbacks), CSS custom properties
(variables) offer a great way to easily

manipulate animations and provide a

consistent experience.

CodePen user Jhey Tompkins has

provided a wonderfully concise example

at https://codepen.io/jh3y/pen/zY Y WxGZ,

offering us a jumping box that jumps just

a little bit higher based on user input,

again with nary a hint of JS.

Let’s quickly touch on how he’s

managed interactivity without JS: in this

instance, he utilises a group of radio

buttons in tandem with general sibling

combinators in order to manipulate the

elements that follow.

#jump:checked ~ [for=’jump’], #higher:checked

~ [for=’higher’], #highest:checked ~

[for=’highest’] {

background: #ffb380; }

The result is that when each radio

button is checked, the matching label’s

background colour is changed to

highlight the current item. Because of

how this combinator pattern works, the

radio buttons must share a parent with

the subsequent elements to be affected by

their state changes.

Now let’s back up and examine the CSS

variables he’s set in place – he clearly

defines them as --size, --height, --squished,

and --extended and defines them within

the scope of the selector that manages

the properties of the jumping box itself.

.jump {

--size: 50;

--height: 1;

--squished: calc(1 + (2 * (var(--height) / 10)));

--extended: calc(1 - (2 * (var(--height) / 10)));

The Keyframers are a pair of web animation

enthusiasts breaking down some of the

most complex and effective animation

processes into digestible, delicious code

nuggets on their weekly livestream.

Let’s get started by learning a little bit

about you.

We’re David Khourshid and Stephen Shaw,

AKA the @keyframers! Every week we have

fun live coding web animations together,

showcasing important techniques and

principles for you to use. You can find links

and videos at http://keyframe.rs.

What’s your favourite CSS animation tip,

something you feel is underused?

CSS variables for controlling duration, easing

and even properties of transitions and

animations is a game changer. Additionally,

animating visibility for enter and exit

animations like dropdowns.

Is there anything you would like to

see added to the CSS specs in terms of

animations or transitions?

We’d love to see spring easing, independent

transform and accelerated layout animation.

3D transforms and hardware acceleration for

SVG as well, although I suppose that’s not

CSS spec necessarily but certainly a big limit

for web animation.

At what point do you deem it necessary

to reach for a JavaScript library? When do

you feel like you’ve exhausted all of CSS’s

animation limitations?

Complex timelines and coordinating many

elements, cross-browser SVG animation and

dynamic animations like cursor tracking and

FLIP/layout transitions.

Lastly, what are some common mistakes or

bad practices you’ve seen when it comes to

CSS animation?

Wrong easing. In general, you want your

animations to adhere to physical principles

like acceleration and deceleration. Ease-

in-out works but playing with cubic-bezier

eases helps immensely! Also wrong duration.

Too fast and the user can’t even register

the animation. Too slow and the user is left

waiting. You have to feel out the right speed.

The Keyframers

Above CSS can be used to animate a business logo, as in
our example

Above Jhey Tompkins’ animation is based

on user input

Create CSS animations