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

[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

Channel: JSConf

Views: 6,013

Keywords: css animation, svg animation

Id: TYlA-eolzLs

Length: 28min 2sec (1682 seconds)

Published: Mon Nov 04 2019