Placeholder Image

字幕列表 影片播放

  • How about now?

  • 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.

  • Just said, different directions, 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 1234 seconds, something like that, and then we can see that run.

  • Go right.

  • So what else?

  • This is animation created for assembling for favorite ing your suppliers on.

  • When we run it, it sort of grows, shrinks fills in and we get those lovely sort of pop of circles around it.

  • So how did we do that again?

  • We turned to s Fiji.

  • First, we create our image.

  • So we create our SPG career path, give it an I d.

  • And then we can move on to actually write our hardship, which is nice and simple.

  • And 1274516 Now getting used something like sketch are some sort of vector at it there 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 SPD without using an editor so that we have our ship explode, that is an s Fiji.

  • And then we're gonna add the circles in afterwards.

  • We'll do this just by hund because this is really simple.

  • It's just eight circles s o.

  • We just create a group for them, position that group in the center and then just create eight circles.

  • Next step is to create that animation.

  • But as before, we need Thio create our initial styling for Rs Fiji.

  • So we're setting a stroke, a stroke with the Philip Color, and then we're setting the transformer origin.

  • And then there's our initial styling for our heart.

  • So next we can move on to create the animation on we're gonna under met the Transform, Phil and Stroke.

  • So if we start with the color at 33% of the way for our animation, we want the Phillips or amend the same color but the stroke to change.

  • And then by the end, we want both the stroke on the physical that 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 went, our stroke has changed, but the actual Phil hasn't we want the heart to shrink, and then, as it's doing the rest, we want to come to come above its original size and then back down to its original size.

  • So by setting the scale too much the stroke color and then have everything else happened at the end.

  • We managed to start choreograph are on a mission.

  • 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.

  • Fill the color itself so we could move on to our circles again.

  • Initial styling.

  • We just want thio.

  • 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 undermine it back in.

  • I just want it to stop.

  • And then we've positioned them that they're 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 Ah, fall Lupin South.

  • But you could do this by hand if you wanted.

  • I'm just saying rotted each of the circles by, um, the inspiration that were on on 45 degrees so increased by 45 each time.

  • And then we're gonna move it out over away from the center on the X axis.

  • It's important to know that if you do the transfer translate before the brought it.

  • It will perform them in that order so it will move and then rotate.

  • It is 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 patient, positioned around like that all of the time.

  • Then 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 try to farm eso es transition the transformed property in the opacity.

  • Probably.

  • So we're gonna, um, under match the moving left under the fading out.

  • So this is really slow down so you can see exactly what's happening.

  • And then this is the actual size and speed that it runs up on the website.

  • Cool with buds were better, right?

  • So what else?

  • This is not to mention I created for front and framework that I wrote a long time ago now, but the animation, I think it's still really cool.

  • 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 translator or transform.

  • Eso translating the Y axis are translating the X axis, and then I'm just hiding on the overflow.

  • So on 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 one's ledges to smooth up and down on a mission.

  • So the only thing different here is the actual drawing, which happens at first.

  • So how do we drawing cord?

  • We can do this with CSS, and we can do this with SPG.

  • So the two properties that we need to do this at the stroke dash, a rare and stroke dash offset.

  • So the circle itself I'm sorry in the circle itself have created a circle.

  • It's worth knowing.

  • Andi set a stroke with a color, and then we've set a Dutch array of 50.

  • So certainly dust a raise just gonna put gaps in the stroke and the number you set inside the dust a raise.

  • The number is how big the gulf will be So by setting the guy up to 50 weaken.

  • See, we've created a 50 pixel gapen than a 50 pixels stroke and then a 50 pixel gap, and it will just repeat infinitely.

  • So if we take that stroke dash or an increase it to be the full circumference of the circle, which in this case is 9 40 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 saying that to 50 we create like a little bit of that.

  • We start to see 50 pickles of that cup, and the rest is of the stroke that we've created.

  • And if we set the gap to be all the way up to this conference of our circle, the same as they, as the Dutch career was, we then have no stroke whatsoever.

  • We do.

  • But it's just hidden because it's being pushed off and we're only seeing the gap.

  • So then we can under met that so once we've pushed all of our outlines out of the way so that we can't see any of them.

  • We can animate that Buck interview using key friends.

  • So I've got a key for him.

  • Animation here called Draw and We're setting the stroke dash off set back to zero.

  • So it's going from 9 40 back to zero where it started, then all we need to do is run that information.

  • So we set the innovation, name, the duration.

  • And then I'm setting Phil mode under Mission fil Mode here, two 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 that's literally all loved, and there is just applied a different different durations and different delays and things like that.

  • And then the whole thing gets drawn on load.

  • So one more example.

  • This is where the talk really came from.

  • About a year, year and 1/2 ago, I wrote an article for Web Designer Mug, and it's part of that.

  • We went looked at a whole bunch of animations from around the web that we're doing either using flash our JavaScript or something like that when we look to see if we could recreate them all in CSS.

  • And the whole point of this was that this was the cover for the piece.

  • When it came out, it was an actual print magazine s.

  • So we decided that we would also on top of that, doing animation off the cover, using all of the techniques that we've discussed.

  • So I thought it would be nice, waited, so offend.

  • My talk would be to talk about this particular animation and how we got there.

  • So the the time, But I'd like to talk about specifically Is this little jumping I?

  • So how did that do it?

  • So again, it's it's all less Fiji.

  • But then we jumped into our into our card and we start creating our key firms.

  • So we're saying here are keep rooms called Bounce.

  • And then at 25% of the way through the animation, we're gonna 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.

  • Doesn't feel really.

  • 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 will attend to do is turn story body in 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 this, and number one is where we'll start.

  • Number two, we're going to duck down, ready to jump.

  • Number three is reaching the top of our drum before is the London and then five in 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 were saying is ducking down, ready to jump?

  • We're gonna scale the Y axis.

  • We're going to squash it along the y axis 80%.

  • So we're gonna scale from in this big down to here.

  • And the next point is our actual jump.

  • So that point we're gonna move along the Y axis like we had before, up 24 pixels.

  • But then also gonna bring the scale back up to its normal size because when you jump, you tented stretch out as you reach the top of you.

  • Jump of Also, there are bringing the animation on 25 to 27% of the way through by having that sort of that little bit in the middle of 25 26 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 three was the London So 35% of our animation were London again.

  • We've gone, we took down.

  • We've got hope will come in back down for the London Zoo, translate.

  • Why is it zero scale is a 95% of its original size?

  • Because when you land, you tend to shrink slightly on there.

  • Now, last one is bringing that sort of spring back to to where its original position was on again.

  • I'm finishing here at, like 40% because I wanted to run, and I want it to repeat infinitely.

  • But I want that delay between, um between repeats so again that spring in back is so we dropped down in 95 then we go back up to one.

  • So really, we've We've added five or six 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.

  • I was just open, straight back down and then in comes in context with all of the others you can see we're just doing the same thing with the years.

  • So the Flushing is again used.

  • The same animation that just offset delays sin with the jumping eyes.

  • They both use the same animation.

  • It's just different delays.

  • So what?

  • All of the other missions I've shown you have in common?

  • They're all created with this CSS on.

  • The majority of them were created with SPG, but most of all, it's it's that the majority of them are simple on defective.

  • It's it's simple in its idea.

  • It's not 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 of money to leave you feeling inspired to go have a play with SPG and CSS animations was a collection of everything I've talked about over on code pen.

  • I will tweet that link out there.

  • So if you wanna follow me out, Lamb, I'll make sure that gets out there.

  • Thank you.

  • Thank you.

  • So stupid.

How about now?

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

CSS Animation - Beyond Transitions by Steven Roberts | CSSConf BP 2019 (CSS Animation - Beyond Transitions by Steven Roberts | CSSConf BP 2019)

  • 2 1
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字