[Applause]
how about now
yeah there we go cool hey hello my name
is Steven as I was just introduced and
I'm gonna be talking about CSS animation
and going beyond just using transitions
and so except my name's Steven Roberts
you can follow me on Twitter and club
pen the links are across the bottom the
whole way I'm in this industry
for around about 10 years I did a lot of
agency work and then have since moved on
to a company called assembler where I
now do a lot of design development and
UX I sort of look after all of that but
enough about me and that's not why
you're here so why bother to animate it
all well animation can be used for a
number of reasons I use animation to
delight your users so simple animations
can really create a memorable experience
can get people coming back to your
website to to to see the things that
you've done and you can really just grab
people's attention with really nice
simple animations so use animation to
inform so this is using the animation to
inform the user that something has
changed or something is happening this
is especially useful when submitting
forms or pulling down theater or
anything like that because you'll be
able to give a visual indication that
something's happening in the browser and
it's not just pong it's not just stopped
things like this tend to stop users from
clicking around or clicking the button
three or four times as we saw in the
other talk so you can sort of help add
your user just few visual cues in
animation and finally use animation to
confirm so this is quite similar except
it's just confirm that something's
happened confirm that the debt has been
sent confirm that something's loading
and all those sorts of things so why
bother to animate in CSS so CSS is
performant simple and powerful and you
can see they're performing has a little
asterisk next to it that's because we
only have a few safe properties that we
that we can animate in CSS and there's a
transform or pass
geom filter and while that may seem
quite limiting there's quite a lot you
can do with just those properties and
it's worth noting as well that in the
future this won't be as much of a
problem things like the Firefox quantum
engine will take away a lot of that pain
and the only reason you can't use the
other properties or you shouldn't use
them as much is because it will cause
Jan Kaas to will cause your animations
to slow down it will cause quite a lot
of performance issues or it could so why
why go beyond transitions what's wrong
with transitions then this is my
favorite slide okay so and we just look
at a couple of transitions now some of
them are fairly simple this is probably
things you've done before so as we hover
over here and we change the color and
then on this next one when we hover over
it it changes to an X so you can see
there the the transition code itself is
just stroke 250 milliseconds and then
we're going to apply a timing function
of easing out and then same for this one
except we're going to animate all of the
properties not just the color and then
magic happens because it's not quite
that simple you still gotta tell it when
and what to animate so here that menu
turn it into a cross is made up of four
lines so the the middle bit is two lines
stacked on top of each other so then
when we hover over we hide the top and
bottom lines and then transform the
middle lines out over to Korea across
simple issue so one more quick example
and so these are just some cards that
you might have on any typical website
and the bottom corner is going to be
used to to show a category or to show a
name or something like that and as we
hover over that's revealed so again this
is using transitions now animation so
upon hover we're going to change the
border width of the after and the
opacity of the before so the after is
the the rectangular corner and the
before is the text so it's pretty cool
so transitions are awesome but limited
we can only animate from
value to another and we require some
sort of interaction in order for it to
fire so this is why we're going to go
beyond transitions so none of this is is
exactly new CSS animations have been
around forever so why am i standing on a
stage in 2019 talking to you about it
because it just feels them to use it
feels since since Apple went and killed
flash the the animations taken a bit of
a backseat on the web no one seems to
really be doing much with it there's a
couple of websites where you're like oh
that's cool but that's kind of about it
whereas we've got this tool in in CSS
that has quite a simple syntax you can
do so much with it and we can bring the
web to life again like it was back
before Apple okay so I'm gonna stop
complaining now and inspire and said or
at least try so this is the first
animation we're going to look at and
it's a simple scrolling Mouse you've
probably seen something like this they
usually sit at the bottom of like a hero
area or something just to indicate to
the user that you can scroll down so how
does it work
so this animation is made up of an SVG
and just two elements inside there
there's a rectangle in a circle and
we've given them both a class name so
the first thing to do is to style the
the elements within our SVG so we're
just going to give a stroke color and
width a fill color and an opacity for
the the actual scroll and then we can
see we've managed to style our style our
mouse then we can move once we've got
our styling we can move on to the
animation so here we're saying we have a
keyframe animation called scroll and
from 0 to 20% we're not going to do
anything and then from 20% to 100% we're
going to move along the y-axis 36 pixels
and then we're also going to elongate
the shape which is by stretching it
along the y-axis using scale Y and then
we're also going to fade it out so now
we've created our animation we need to
set that so we give it an animation name
duration and an inspiration count and it
didn't work so why didn't it work so we
were missing the transform origin
property so this is quite important when
you're animating especially with SVG and
things like that because then not
using the regular Dom they have their
own Dom separate to HTML one so here
we're saying we're going to transform
from the center and from 20 pixels and
then once we've applied that we can see
it's starting to move down over where it
was kind of just stretched on the spot
before so it's nearly what we had as the
example but not quite so he's the two
side-by-side the one on the Left sort of
dropping down and stretching and the one
on the right is what we're aiming for so
without going back and changing our
animation we can accomplish that with
one line of code so here we're just
using the animation timing function and
we're using cubic Bezier instead of one
of the preset values like linear or ease
in or ease out or anything like that and
but cubic Bezier just allows you to add
custom functions and the numbers look
horrible but don't worry about that this
generator isn't all that sort of thing
out there so you can go and have a play
and see what looks good what doesn't and
what you're aiming for so then when we
apply that you can see we now sort of
have that nice or particular little as
itself goes up and then comes down again
so in less than two three minutes of
talking we've gone from completely
installed SVG to a finished animation so
it's no bad but you've probably seen
something like that before let's see if
I can really impress you this time so
this animation is created entirely with
SVG and CSS
so how did I do it so the the key to
this is the the animation steps function
we'll come back to that in a moment but
that's really the key to what's
happening here so step one for creating
this animation was creating the image
itself so start by drawing one of the
poses as a vector I think I used sketch
but you can use whatever you want and
then you go ahead and draw the remaining
poses in my case that ended up being ten
and that was because it was a time
factor that I needed to get the work
done
tends a nice round number for doing
maths which is always fun and ten
actually works okay in terms of not
seeing seen it stutter as it replays so
once I had all of my separate bird
elements I split them into equally sized
cells the actual boxes aren't needed
that's just to show you where I've
positioned the birds and then now that
we've done that we can move on to make
the bird fly so in our HTML we create an
element can be a div or whatever you
want and give that a class of bird and
we then set that image we've just
created as the background for our
element I will then set in a width and
height and we're using the will change
property which is a performance property
we will just send that the background
position is going to change so if you
prepare yourself for that we're just
telling the browser that this is going
to change prepare yourself and then we
hopefully will see less studies and
things like that and the width and
height I'll come back to here so the the
height was just a random number I chose
125 pixels looked good and then to get
the width we take the size of our
original SVG divide that by the number
of frames and that will give us the
width of one frame so that ended up
being 88 pixels so when we look at that
we can see that that's just one frame of
that image so if we go to our our actual
animation and create that luckily here
we just need one line and that's it so
our animation fly cycle just says when
you get to the end the background
position will
moved negative 900 pixels on the x-axis
then we apply that so we apply the
animation now like I said the animation
timing function what that is doing is
instead of like linear or moving from
one element to another it's going to
step through whatever you tell it
however many times you tell it to so
because we're moving background position
and we're doing it over 10 steps it's
going to move across that image 10 times
in the number of in the time that we set
so I'm setting it to repeat infinitely
so it's just going to keep going and so
then I'm setting the duration and delay
for the first burden I'm send the
animation duration is going to take one
second and I've set a negative to lay
here and what that does is say that once
the page loads the animation will
already be running so that's our bird
flying on the spot so now that we've got
one we can go and create multiple
variations of that in my case I've
created four so we have birds to three
inform using modifiers to to set the
names and then I'm just setting
different durations and delays and by
doing that we're using the same element
and the same animation but we're just
offsetting them slightly and what that
does is create a nonlinear repeatable
animation so all of these are exactly
the same but just running in different
timings and different delays so now that
we've got our bird flying on the spot we
now need to move it across the screen
so first of all we position rough Albert
in a container position that container
off the page and then we can move on to
our animation and this is actually a bit
more complicated than the last few I've
shown there's a number of steps to it
and so that to begin with I'm saying the
translate Y value which is opened down
on the the y axis is 0 translate X is
minus 10 so we're pushing it off to the
off to the left and then I've set the
scale down to now point 3 and as we
reach 10% of our way through our
animation we're just moving along the y
axis
along the x-axis so what we're doing
there is is not just flying in a
straight line from left to right we're
sort of going up and down as we go and
I'm also setting the scale up and down
as we go to give the illusion of depth
so by doing that it sort of looks like
the birds getting closer and further
away by changing its scale and there's a
number of steps between there but by the
time we reach 60% of the way for our
animation I want it to be finished so
it's going to be off the other side of
the screen and not visible anymore now
the reason for stopping at 60% and
repeating those values at 100 is that
when it were if we want to create a
delay between the animation iterations
there's no syntax to do that you can't
say you know repeat infinitely but delay
3 seconds between each one there's no
way to do that so the way that you do it
is by setting the same values as
different parts of your key frames so by
60% we're finished but it's going to
keep running until at 100% and still be
off the side so then when it comes back
around the others will still be going
which you'll see in a moment so we need
to apply that we've got a timing
function of just linear and the duration
color is infinite so it's just going to
keep going and we've set the name so we
need to do what we did for set our
duration and delay and then we can say
it going says our first bird
so feelin Korea are other variations
like we did with the the single-bird
just set different durations different
delays
I'm not saying negative delays here
because I want them to sort of follow
each other across the screen so it's
delays of one two three four seconds
something like that and then we can see
that run
go right
so what else and so this is animation I
created for assembler for favoriting
your suppliers and when we run it it
sort of grows shrinks fills in and we
get those lovely sort of pop-up circles
around it so how did we do that again we
turn to SVG first we create our image so
we create our SVG create a path give it
an ID and then we can move on to
actually write our heart shape which is
nice and simple m1 2.7 four five one six
now kidding use something like sketch or
a some sort of vector edit there is
somewhere way where it can output this
for you so that you don't have to write
yourself all credit to you if you can
write a heart in SVG without using an
editor and so there we have our ship
export that as an SVG and then we're
going to add the circles in afterwards
we'll do this just by hand because this
is really simple it's just eight circles
so we just create a group for them
position that group in the center and
then just create eight circles so our
next step is to create that animation
but as before we need to create our
initial styling for our SVG so we're set
in a stroke a stroke width of fill color
and then we're set in the transform
origin and then there's our initial
styling for our heart so next we can
move on to create the animation and
we're going to animate the transform
fill and Stroke so if we start with the
color at 33% of the way through our
animation we want the fill to amend the
same color but the stroke to change and
then by the end we want both the stroke
and the fill color to have changed the
reason for that will become apparent in
a moment so then once we've done the
color we can look at our scale so we
want to say by that 33% mark which when
our
stroke has changed but the actual fill
hasn't we want the heart to shrink and
then as it's doing the rest we want to
come to come up above its original size
and then back down to its original size
so by setting the scale to match the
stroke color and then how about
everything else happen at the end we
managed to sort of choreograph our
animation so as it's getting smaller The
Strokes filling in and then as it's
coming back up that's when it starts to
fill and fill the color itself so then
we can move on to our circles and again
initial styling we just want to position
them the reason for the transition there
have just been really sharp
one-millisecond is because on the
reverse when you click it for a second
time I don't want it to animate back in
I just want it to stop
and then we've positioned them there
they are all on top of each other all
eight circles and then we need to
position them in the right position so
here I'm using a for loop in sass but
you could do this by hand if you wanted
I'm just saying
rotate each of the circles by the the
iteration that we're on and 45 degrees
so it'll increase by 45 each time and
then we're going to move it out over
away from the center on the x-axis it's
important to know that if you do the
translate before the rotate it will
perform them in that order so it will
move and then rotate it as opposed to
rotating then moving so it's definitely
worth knowing so there we have our
positions of our circles around the
heart so next we just want to move those
cells to when it's actually active
because we don't want the hearts circles
to be positioned around like that all of
the time so we can create some
additional styles for when it is active
and all we're doing here is just saying
for the circles we're going to transform
so we transition the transform property
in the opacity property so we're going
to animate the moving left and the
fading out
so this is really slowed down so you can
see exactly what's happening
and then this is the actual size and
speed that it runs out on the website
cool the boats were better right
so what else so this is an animation I
created for for an M framework that I
wrote a long time ago now and but the
animation I think is still really cool
and there's nothing on here that I
haven't already showed you how to do so
the majority of what's going on here is
just translate or transform so
translating the y-axis or translating
the x-axis and then I'm just hiding the
overflow so on the the slider in the
middle that's just using steps like I
did for the birds and it's just stepping
through the animation is supposed to be
in smooth and then again with the scroll
in ones they're just to smooth up and
down animation so the only thing
different here is the the actual drawing
which happens at first so how do we draw
in code we can do this with CSS and we
can do this with SVG so the two
properties that we need to do this at
the stroke - array and stroke - offset
so the circle itself I'm sorry the
circle itself I've created a circle it's
worth knowing and we set a stroke width
color and then we've set a - array of 50
so setting the - array is just gonna put
gaps in the stroke and the number you
set inside the dasher is the number is
how big the gap will be so by setting
the gap to 50 we can see we've created a
50 pixel gap and then a 50 pixel stroke
and then a 50 pixel gap and it'll just
repeat infinitely so if we take that
stroke - array and increase it to be the
full circumference of the circle which
in this case is 940 we have a stroke
that covers the entire circle but we
also have a gap that will cover the
entire circle as well so if we then move
on to offset this is where we can start
offsetting where the stroke drawing
starts so by setting that to 50 we
create like a little bit of that we
start to see 50 pixels of that gap and
the rest is of the stroke that we've
created
and if we set the gap to be all the way
up to the circumference of our circle
the same as they as the - array was we
then have no stroke whatsoever we do but
it's just hitting because it's been
pushed off and we're only seeing the gap
so then we can animate that so once
we've pushed all of our outlines out of
the way so that we we can't see any of
them we can animate that back into view
using keyframes so I've got a keyframe
animation here called draw and we're
setting the stroke - offset back to zero
so it's gone from 9:40 buck-20 where it
started then all I need to do is run
that animation so we set the animation
name the duration and then I'm setting
fill mode animation film mode here to
forwards and basically all that means is
once you reach the end of the animation
don't go back to what its original value
was just keep the keep the values from
the end and then when we run that you
can see we've drawn the outline of the
circle so literally all I've done there
is just apply two different different
durations and different delays and
things like that and then the whole
thing gets drawn on Lord so one more
example this is where the the talk
really came from about a year year and a
half ago I brought a article for web
designer Marc and as part of that we
went and looked at a whole bunch of
animations from around the web that were
doing either using flash or JavaScript
or something like that and we looked to
see if we could recreate them all in CSS
and the whole point of this was this was
the cover for the the piece when it came
out it was an actual print magazine so
we decided that we would also on top of
that doing animation of the cover using
all of the techniques that that we've
discussed so I thought it would be nice
way to event my talk would be to talk
about this particular animation and how
we got there so the the bit I'd like to
talk about specifically is this little
jumping I
so how did I do it so again it's it's
all SVG but then we jumped into our into
our code and we we start creating our
keyframes so we're saying here that our
keyframes called bounce and then out 25%
of the way through the animation we're
going to move up along the y-axis 24
pixels and then by 35% the animation
were back down on the ground so when we
run that it works but it's kind of dull
doesn't really have any life to it it
doesn't feel real it doesn't even
doesn't even feel like a cartoon it just
looks a bit bland and so we want to
breathe some life into our animation we
want to see if we can sprinkle some of
that Pixar magic on it so when I need to
do something like that what I tend to do
is turn to storyboarding and
storyboarding allows you to quickly plan
your animations as you can see you do
not need to be able to draw um but
basically all this is doing is saying
number one is where we will start number
two we're going to duck down ready to to
jump number three is reaching the top of
our jump number four is the London and
then five and six is that kind of
springing back into position once you've
landed so once you've got your plan how
do you call it that so step one which
we're saying is ducking down ready to
jump we're going to scale the y-axis so
we're going to squash it along the
y-axis 80% so we're going to scale from
in this big down to here and the next
point is our actual jump so at that
point we're going to move along the
y-axis like we had before up 24 pixels
but then also going to bring the scale
back up to its normal size because when
you jump you tend to stretch out as you
reach the top of your jump I've also
there I'm bringing the animation on 25
to 27 percent of the way through by
having that sort of that little bit in
the middle of 25 26 and 27 where it's
all got the same properties it means a
little sort of hung at the top of the
jump a little bit before coming back
down so then step 3 was the London so 35
percent of our animation we're landing
again we've gone we've ducked down we've
gone off we come in
back down for the London's or translate
why is it zero our scale is a 95 percent
of its original size because when you
land you tend to shrink slightly and
then our last one is bringing that sort
of spring back to to where its original
position was and again I'm finishing
here at like 40 percent because I wanted
to run and I wanted to repeat infinitely
but I'd I want that delay between
between repeats so again that springing
back is so we've dropped down and 95 and
then we go back up to 1 so really we've
we've added 5 or 6 different steps to
this animation and we've managed to make
it look a lot more alive and feel much
more playful than it did before oh it
was just up straight back down and then
in con I in context with all of the
others you can see we're just doing the
same thing with the ears so the the
flushing is again use the same animation
they're just offset delays same with the
the jumping eyes they both use the same
animation it's just different delays so
all of the animations I've shown you
have in common well they're all created
with this I have CSS and the majority of
them were created with SVG but most of
all it's it's that the majority of them
are simple and effective it's it's
simple in its idea it's not you know
trying to be overly complicated it's not
trying to do too much and I think that's
kind of the key to a lot of animation is
finding something that that's quite
simple but really grabs your attention
so hope I've managed to leave you
feeling inspired and to go have a play
with SVG and CSS animations there's a
collection of everything I've talked
about over on code pen I will tweet that
link out there so if you want to follow
me out learn I'll make sure that gets
out there and thank you
thank you so much