Yeah, There we go.

Go.

Hello.

My name's Steven, as I was just introduced, and I'm gonna be talking about CSS animation on going beyond just using transitions.

I'm so excited.

My name's Steven Roberts.

You can follow me on Twitter and Co pen.

The links were across the bottom the whole way.

A vote 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 never do a lot of design development on D.

U x or 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 could be used for a number of reasons.

Use on a mission to delight your users so simple animations can really create a memorable experience can get people coming back to your website, too thio to see the things that you've done.

And you can really just grab people's attention with really nice simple animations for use on a mission 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 are pulling down data 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 Hong, it's not just stopped.

Things like this tend to stop.

Users from clicking around are clicking the button three or four times, as we saw in the other talk, Um, so you can sort of help aid your user just few visual cues in animation and finally use animation to confirm.

So this is quite similar, except it's just confirmed that something's happened.

Confirmed that the debt has been sent to confirm that something's loading on all those sorts of things.

So why bother?

20 million CSS?

CSS is performance symbol and powerful, and you can see their performance has a little Asterix next to it.

That's because we only have a few save properties that we that we can animate in CSS, and there's a transformer opacity in filter.

And while that may seem quite limiting, there's quite a lot you can do with just those properties on bits worth knowing as well that in the future this won't be as much of a problem.

Things like the firefights quantum engine will take away of lot of that pen.

And the only reason you can't use the other properties are you shouldn't use them as much eyes because it will cause John Costa 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 slight guess.

I'm 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, we changed the color.

And then on this next one, when we hover over, it changes to an axe so you can see that the transition called itself.

It's just stroke 250 milliseconds.

And then we're gonna apply a time in function of easy and out and then send for this one.

Except we're going to animate all of the properties, not just the color and then much of Coppins because it's not quite that simple.

You still gotta tell it when and what to under Mitt.

So here that, um menu.

Turning 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 line's our over to career across simple one more quick example s Oh, these are just some cards that you might have on any typical website on the bottom corner is gonna be used to to show a category are 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 Andi opacity off before So the after is tthe e rectangular corner.

On the before is the text.

That's pretty cool.

Transitions are awesome but limited.

We can only animate from one value to another, and we require some sort of interaction in order for it to fire.

This is why we're gonna 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 used.

It feels since since Apple went and killed flush that the animation is taken a bit of a back seat on the Web no one seems to really be doing much with.

It was a couple of Web sites where I can and that's cool.

But that's kind of about it.

Whereas we've got this tool in CSS that has quite a simple syntax, you can do so much with it, and we can bring the webbed toe life again like it was back before, um, couple.

Okay, so stop complaining now and inspire and said, or at least try.

This is the first animation we're gonna look out and it's a simple scrolling mouth.

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?

This information is made up of oven SPG and just two elements inside.

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 ah the elements within our SPG.

So we're just gonna give stroke color and with ah, Phil color in opacity for the actual scroll.

Uh and then we can see we've managed to style our style of mouse.

Then we can move once you've got style and we can move on to the animation.

So he was in.

We have, ah key frame animation called Scroll On from 0 to 20%.

We're not going to do anything.

And then from 20% to 100% we're gonna move along the y axis 36 pixels and then we're also going to be long get the ship, which is by stretching it a lot in the UAE access using scale.

Why?

And then we're also gonna fade it out.

So we have created our information.

We need to set that.

So we give it another MACHIN name, direction and an exploration count.

Andi, 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 under Mitt and especially with SPG and things like that, because they're not amusing.

The regular Dom, they have their own dom separate too um, to the head.

She, um Owen.

So he was saying, We're gonna transform from the center on Dhe 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, says nearly What we heard is the example, but not quite.

So here's the two side by side, the one on the left side of dropping down instruction 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 he regis using the animation time and function, and we using cubic busier instead of one of the pre set values, like linear or he's in or he's out or anything like that.

But cubic busy just allows you to add custom functions on.

The numbers look horrible, but don't worry about that.

This generators and all that sort of thing out there so you can go and have a player and see what looks good.

What doesn't hit what you're aiming for.

So then when we apply that you can see, we now have that nice ow Particular Lola's itself goes open, then comes down again.

So in less than 23 minutes of talking, we've gone from completely installed SPG to a finished on the mission so bad.

But you've probably seen something like that before.

Let's see if I can really impress you this time.

So this animations created entirely with SPG and CSS.

So how did it there?

So the key to this is 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 foot for creating this under mission was creating the image itself sustained by drawing one of the poses a za vector.

I think I used sketch, but you can use whatever you want and then you go ahead and draw the remain imposes.

In my case, that ended up being 10.

That was because it was a time factor that I needed to get the work done.

Tens a nice round number for doing months, which is always fun on dhe 10 actually works okay, in terms of not seeing, um, seeing that stutter as it replays.

So once I had all of most effort bird elements that split them into equally sized itself.

The actual boxes aren't needed.

That's just to show you where of position the birds.

And then now that we've done that, we can move on to make the boat fly.

So in our coach, two mile we create an element could be a devil.

Whatever you want on, give that a class of bird and we then set that image.

We just created a CZ the background for our element.

Well, then setting a width and height and we're using the will change property, which is ah, performance property will just said that the background physician is going to change.

So if you prepare yourself for that, were just telling the browser that this is going to change, prepare yourself and then we hopefully we'll see less stutters and things like that on the width and height.

Welcome back to here.

So the height was just a random number.

I chose 125 pixels look good.

And then to get the width, we take the size of our original s Fiji divide that by the number of friends and that will give us the width of one frame, so that ended up being 88 pixels.

Then when we look at that, we can see that that's just one frame off the 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 have moved negative 900 pixels on the X axis.

Then we apply that eso we apply the animation them.

Like I said, the animation time in 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 sew, because when we've been 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.

Thio repeat infinitely, so it's just gonna keep going s So then I'm set in the direction and delay for for the first burden.

I'm saying the animation direction is going to take one second and upsetting negative delay here.

And what that does this say that once the page Lords, 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 of created four.

So we have birds 23 and four, Muse and Ben modifiers to set the names, and I'm just set in different directions and delays.

By doing that, we're using the same element on the same island under mission.

But we're just offsetting them slightly.

And what that does is create a nonlinear repeatable on a mission.

So all of these are exactly the sand, but just running in different timings and different delays.

So now that we've got our bird flying on the spot, we no need to move it across the screen.

So first of all, we position rap Albert in a container, position that container off the page, and then we could move on to honor Machin.

And this is actually a bit more complicated than the last few of of shown.

There's, ah, number of steps to it s o there to begin with.

I'm saying the translate Why Value, which is open down on the Y axis is zero translator exes minus 10.

So we're pushing it off to the after the left and then upset the scale down to no 100.3.

And as we reach 10% of our way through our information, we're just moving along that why access along the X axis?

So what we're doing there 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 set in the scale up and down as we go to give the illusion of depth.

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 gonna be off the other side of the screen on dhe, not visible anymore.

Now the reason for stopping at 60% on dhe repeating those values are 100.

Is that when it if we want to create a delay between the animation, it'll rations.

There's North syntax to do that.

You can't say, you know, repeat infinitely.

But delay three seconds between each one.

There's no way to do that.

So the way that you do it is by setting on the same values is different parts of your key friends.

So by 60% we're finished, but it's gonna keep running until that 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 on the duration.

Carter's infinite, so it's just gonna keep going on.

We've set the name, then we need to do what we did before, set out duration and delay, and then we can say going There's our first bird.

So fill in Korea are other variations, like we did with the single bird.