 Anyways, I had a really well-rehearsed intro, but we'll just say that was not it. CSS often gets really underestimated as an animation tool, and I think that's kind of sad, because knowing CSS animation and understanding it can really save you a lot of time and effort if you ever have to animate anything on the web. It only works on the web at CSS, kind of the little place it lives. But if you need to do that, CSS has like the lowest barrier to entry of all of our options, and it kind of has a lot of power. Actually, it does have a lot of power. I sort of have this theory that, or actually I'm going to show you some of the power of it, and we're going to talk a little bit of technical stuff, a little bit of design stuff, a little bit of code, that kind of thing, and a little bit of design. And I sort of have this theory that the people who wrote the actual CSS specification, especially the three specifications that have to do with animation, I think they wanted to keep it a secret. And I know I just met you guys, and I sound completely insane saying that. So yeah, but really, because they have, we have these three specifications, right? We have transforms, transitions, and animations. Those are all words that sound like they could mean the same thing, they could do the same thing. All of those kind of sound like they make something move. And you're like, okay, only two of them make the move. I can eliminate one for you. Transforms don't make anything move. Nice try. Good for you, transforms. You don't make anything move. So we have transitions and animations, and both of those things actually cause animation according to the dictionary, because the dictionary and all humans define animation as something moving over time. They both do that. Only one of them is actually called animation. So what's the deal with that? See, totally trying to keep it a secret. But I'll show you what I mean with a cat, as is required of me by internet law. You are not allowed to demo anything that has to do with HTML or CSS if you don't use a cat. If you've ever tried it, you've probably got a fine in the mail. It's really large. Anyways, this is my cat, Cyril. He's a grumpy old man, as you can tell from his beautiful model photo. But if we wanted to do some things, like if we wanted to use a transition to actually make some stuff move, transitions are like our easiest way of making stuff move in CSS. We can't really do anything at all unless we actually like give it some kind of, you know, two states to work with in CSS because we don't want to like write any JavaScript or anything. We stick with hover called in kitten, just to suck up to him. So maybe he'll be nice to me when I get home. And if we want him to do something, we might tell him to like transform and maybe like, I don't know, scale by like kind of a little bit if that's cool with you. There's an SN transform. Sorry. And then that one in its own isn't really going to do anything at all because I haven't actually told it to transition anything. So we'll be like, Hey, Mr. Kitten guy, if you don't mind, oh, God, I can't even spell kitten. You guys, I swear I do this for a living. Oh, no. This is my favorite way to code because it's like if I make a mistake at home, no one says anything. I mean, you think Cyril says anything if I make a spelling mistake, but you guys laugh. It's awesome. Anyway, so we say we want you to transition. It just gets worse and worse. And we're like, transition your transform. Yeah, we don't sound crazy saying that. And maybe take like one, I don't know, point three seconds and just like ease that stuff out if that's cool with you. And then if we refresh him, we're like mouse over and we're like, yay, he gets bigger, but that's not dramatic enough. I mean, come on, we're on a big screen. Let's make that bigger. And now it's like, all right, you are really scaling up. And that's pretty sweet. Like it's a transition. It's actually animating. Things are changing over time, even though it's a transition, but whatever, it's between two states. We're kind of happy about it. If you've ever had to write your own mouse over and like JavaScript or ActionScript, you're probably like crying right now because it took a lot more than two lines of code. And it does both in and out, right? Yeah, that's the magical part. Anyways, that's transitions. It's super powerful, actually, but what if we wanted him to do more than just go between like two different places? That's where our animations actually come in. And to write animations in CSS, we use keyframes because, well, why would we just call them animations? That'd be silly. And you need to make a list of keyframes and give it a name. And that list of keyframes can actually be as long as you can possibly imagine. Like usually you go from 0 to 100% and you are allowed to use decimal places, so it's effectively infinite. The biggest limit really is your patience to write them. And I've learned that it's true, like how much are you going to type out? But I've learned that when you're in front of like say more than 100 people, you should limit yourself to two keyframes. Total rule of thumb. So we're going to go from, we're going to attempt to spell transform correctly this right time. That sort of looks like it worked. We're going to say like translate on the y-axis on like 100 pixels. That sounds pretty. And then go to, oh, crazy keywords. Not going to have any idea what this is going to do. And we'll do the same sort of thing. We'll transform. We'll trans. Oh goodness. Why? And we'll do basically go from like go from somewhere lower than you are to go and then go to where you are now. That on its own does absolutely nothing. Once again, I'm saying this a lot. Like that doesn't do anything. You wrote a long list of keyframes, two lines, whatever. Let's pretend I wrote a bunch more. But nothing will actually happen yet until you actually tell Mr. Cyril the kitten to animate stuff. So we'll get rid of this transition because there's nothing to transition anymore. It won't be like animation. Maybe use a slide one. I don't know. Take like a second. That sounds cool. And we'll just ease that out again because that sounds like a good idea. And then when we refresh him, he slides. 100 pixels was a terrible choice. Who let me do that? Let's try 300. That's better. All right. But it's sort of like, great. He did it once. Thanks, dude. That was really helpful, Cyril. You're doing great. So maybe we'll just tell him to do this like infinitely, infinite. It's really hard to spell. And then he can do that over and over. And it's kind of annoying because it repeats in a strange, strange, awkward way. So we'll be like, okay, just do that like alternate, reverse if that's cool with you. And then he's like, all right, back and forth. I got it, dude. Because my cat calls me dude. That makes any sense at all. But like, you know, we can do some fun things like that. And we can get even crazier with it if we wanted to. Like we can, I don't know, maybe make him rotate like two turns. He's going to hate me. And maybe we'll rotate this. He has to start at zero because you need to have like those two places. And then this is going to get a little ugly helps if you save it first. I have what? Oh, there we go. Maybe rotate. It's not two turns. There's only two. Oh my goodness. See, you try to show off a little bit and you just screw everything up. And my point was to make something incredibly ugly. And like Cyril, he's probably puking up all of his cat food right now. It's actually making me a little dizzy. And we made something totally ugly, even though my whole point is to not make something ugly. But that's still like, for a few lines of CSS, I mean, that's all we wrote. And we're really messing with that cat. Thankfully, we can also use this to do less terrible and annoying things. Oh, you know what I forgot to do? That whole mirroring displays thing. That's the un-mirroring song. Do you guys sing it too? No? Alright, never mind. Alright, so there's some extra slides. So, you know, we did a whole lot there with Cyril, made a big mess of him, and I'm going to get in a lot of trouble when I get home. But we did sort of prove a couple of things here. There's some serious advantages to using CSS. There's a really low barrier to entry. We can mess with our cats in just a few lines in like five minutes. And if you weren't being watched by a bunch of people, you would have spelled that all correctly the first time around, and it would have taken like half the time. Another really good advantage is reusableness. You know, I was joking about how long you can make your keyframes, your list of keyframes. But if you keep them to be a really short list, you find that you can reuse them on multiple things, and they become very modular. Like, if you write one set of keyframes, if we had like 10 cats, like if I was a crazy cat lady and I had 10 cat pictures, I could apply that same animation to all 10 cats, and I would never have to write any more keyframes. And then we really would have made someone throw up. It would have been great. And then performance. That's one that gets called out a lot. A lot of people are like, you know, CSS animation is way more performant than all our other options. And that's sometimes mostly true, because effectively, the browser is doing everything it can. It's doing all the work, really, for CSS animations, right? There's no, like, extra library. The browser is doing all the work, and it's trying to do it as efficiently as possible. So normally, and in under, like, perfect circumstances, yes, CSS animations are probably more performant than, like, JavaScript, maybe. But there's this thing about humans. We can write really bad code. I mean, I never do it, obviously, clearly, never do it. And you guys never do it, but other people do. And if you try and animate something like height, let's say, that is a very, very expensive property to animate in the browser, it doesn't matter what you use to animate that with, it's probably going to look pretty crusty. It's just not going to happen. So it comes with a big, huge asterisk, because, yeah, there's some performance advantages, but it evens out in the end, and it's really more about making smart choices. So the thing CSS is most best at, because that's how you say English, is best at for animating. The types of animations it does, it really shines with are animations that have predetermined motion. You saw in that key frames, set of key frames we created, we said go from a very specific place to another very specific place. And you can get a little bit relative with that, but you can't ever change those two places. Once you write those, they're there. That's where it's going. If you were like, hey, I wanted you to change your mind halfway through, it's not going to happen without a huge headache, and you should probably just do something else. It's really good at animating between two states. That's both the transitions, like we saw with that little hover, and he's huge cat now. With that, and also animations are really good at going, the key frame animations are good at going from one state to the other. If you have a situation where you're like, well, sometimes it should go over there, sometimes it should go over there, and sometimes it should do that. If you're ever doing this to describe your animation, CSS is probably not your best choice, unless you like a lot of extra work. And it's really good at having reusable motion. I think I say that like four times in the next two slides, like it's some kind of metaphor, or maybe I just repeat myself. Not sure. We can get kind of modular with it, and we'll look at that in our little example too. There's more cats to come, don't worry. It's not so good at dynamic motion, like I mentioned, things that have to change. It's not very good at anything that has a large number of states, and it's not very good at physics. I do this like online hangouts Q&A with a friend of mine every once in a while, and every time, the first trolly question in the chat room we get is someone who's like, why would I ever do CSS animation? I can't even do physics. And it's strange that they talk in a mean girl's movie voice. But aside from that, it's like, at one hand, you just want to be like, oh my god, shut up. But really, that's not the correct answer. It's something you want to do. You want to animate and have physics. It's a thing. But when you kind of get to that, there's an assumption there that they're sort of missing, and it's an easy one to miss, is usually we animate stuff with programming languages, and we can do things like model gravity and add drag and all that kind of stuff. CSS is a markup language, not a programming language. So it has no idea about that stuff. It just can't do it. And that tends to be a thing that a lot of us get hung up on. And I know I do sometimes too. I'm like, why can't I do this? Oh yeah, you're a markup language. Sorry, CSS. There's a lot of things it can't do, but it has friends for that. CSS is kind of nothing on its own, right? Without its PAL, HTML, and JavaScript, it's like, it basically doesn't exist. Especially, JavaScript is really great at doing logic and knowing what kind of interaction is happening. CSS knows hover and maybe focus and target, kind of. That's all it's got. But JavaScript is really good at that. So using it with other things is totally acceptable. Like as much as it's cool on the Internet to make pure CSS things, when you're doing real work, making JavaScript and CSS work together is pretty awesome, and they're good friends. And there's nothing wrong with having JavaScript to your logic and CSS do the motion, and it's actually a pretty good mix of things. So taking a little break from technical stuff for a second, I'm going to say, I think it was Robert who said it yesterday that he didn't really like animation. I totally love animation, so we're opposite on that. I actually think designers should use animation more, especially on the web. I think people who design and build for the web should use animation more, because it's a really powerful and just great design tool that really gets ignored. And when I say things like I want to see more animation on the web, people just have this reaction that I mean stuff like this. Are you going to play? Oh, yeah, of course you are. I'm not done yet. Yeah. I mean, I thought I was scrolling and they're like, no, things, look at stuff. And it's just awful. But like, this is what, when you think of web and animation, you think of like skip intro, you think of banner ads, and then you think of what, I don't know what that is. That, you think of that, but that's not what I mean. I mean stuff like this. This is Stripe Checkout, which you might have used if you've ever, I don't know, signed up for Prodribal Accounts or anything else like that. They actually went and redesigned their entire checkout process, and their whole goal in doing it is they wanted to create a product that felt very trustworthy and very sophisticated, and they decided they were going to get that across mostly with animation. That was going to be their main design mechanism for getting those feelings across. And they do a really good job. I mean, if you went and counted all the animations and that Go Chat thing, and you counted all the animations, getting through Stripe Checkout, you might end up at the same total. I haven't added it up, but it's pretty close. But like, these animations, even though there's a lot of them, they have purpose, they have style, they're there for a reason, they've been designed and considered, and that makes a huge difference, because without that, you have Go Chat. And it's his friends, I don't know, whoever else does that. They're not the only ones. So really good animation has two parts to it. It has its place very well, it has purpose and utility, and it has style. I'm going to focus more on talking about style, because I've been here the last couple days, these guys, you guys, oh my god, I just said you use guys, oh, that's horrible. You guys are super smart, clearly I'm not. So I think you can handle the purpose part yourself. So we'll go walk through a quick little demo, which of course has cats. Once again, don't want to get fined. So this is our starting point. We have some content that is animating onto screen. I chose content that's confirming my appointment to go hang out with cats and drink tea at a cat cafe. For you, that might be like some part of a news story or some data point or something like that. Content animating on screen happens a lot. For me, required to use cats, like I said. But we're basically at the point here where we've just quite literally animated it on. We're like, hey, you know, do a little animation and slide in, fade up, that's it, I'm done. It animated onto screen. That's all we've got. We're like, what else can we possibly consider? Heck of a lot more. And then we have our section of animation here and then our little key frames to have it slide in, which actually looks remarkably what I wrote for Cyril. I'm going to pretend that was foreshadowing and totally on purpose. So here's some animations there. And there's some pretty basic stuff. But we could probably do a little bit more than that, right? We took all that time to animate it on and we had no real purpose or reason for doing it. We're just like, yep, it's going to animate on. So that's the point where we want to start thinking about some animation principles. And strangely enough, animation has existed for a really long time. There's people who've been doing it for like decades and decades and there's a ton of stuff they've learned about it. People wrote some books about it. Maybe you've heard of Disney. If you haven't heard of Disney, you've probably seen the Tumblr about it. Which actually is a really good summary of the points of that book, I have to say. And it's not just like, for Tumblr, that's some quality content right there. But it's pretty well known if you've read some things about animation or either of those things. But there are 12 principles of animation. 12 is a pretty big number. I only have half an hour. So I'm not going through all 12. And honestly, the whole list of 12 doesn't really apply to us as people who are animating with computers on screen. I mean, these were mostly people who came up with them were mostly old men drawing like Mickey Mouse frame by frame. Smart guys, very talented, but not everything they had to say applies to us. So I'm going to take three of them from the list of 12 and apply them to our little example to show you how we can make it better. The first one is timing. I don't know, timing is like the key to comedy. It's basically the key to like everything, I think. Definitely the key to animation. It's kind of like if there is no other principle of animation you ever understand or know, that's the one to do. And according to the super smart old guys at Disney, timing is the thing that makes objects appear to obey the laws of physics. Obviously they don't really because in film and on computer screens there is like no gravity or anything like that. So it's not real physics. It's appearing to have physics, appearing to obey the law of physics. A kind of more nuanced definition of timing and sometimes this part of timing is called spacing is the idea that timing also conveys things about the emotion and intention of the thing that's moving. You know, something that moves really fast has a lot of energy, something that moves really slow might be heavy or maybe it's sluggish, maybe it's tired. We have this tendency to kind of humanize everything we see and we try to like figure out why it's moving the way it is. So as designers we should maybe like put the why in there instead of just like picking things randomly. So timing is super important, but if you've ever looked at the CSS timing functions you'll notice we have a very short list. So that's like five things to cover all that important really good communication ground. Yeah, probably not looking like it's going to work so well. That's why we have a thing called cubic Bezier which is basically what saves CSS animation and makes it something you can actually use if you care about how things look, which of course you will do. I usually describe cubic Bezier functions as being number barf, but I assume most of you look at a list of four comma separated numbers and see two x y coordinates because you're super smart and that's exactly what they are. They're basically the two black points there, those two control points of where those are. When you look at a motion graph of CSS of you know easing when we plot the progression of the animation against time with the CSS easing functions and cubic cubic Bezier functions we can use start and end are fixed and we just change those two control points to get different curves and it's pretty cool. We can get a whole lot of things. This is what allows some people who did more work than us and were smarter or you know did some work for us really to do things like get the equivalent of the pen or easing equations in CSS as well so they've already figured out the cubic Bezier values you need for those. You know let's do any work. Or if you want you can go crazy and make your own custom cubic Bezier curve by dragging the handles, extra office fun, you can race two different kinds of easing against each other, fun trick, spoiler alert it's always a tie. But if your coworkers aren't here you could totally get a free coffee out of that. So everything is better than cubic Bezier is. Better with cubic Bezier is pizza, cereal, whatever especially animation. So let's do some cubic Bezier like cooking show style and we'll pick one for our little message box guy. I picked that one. Up top of my head I was like oh yeah it needs .157. No that's not how I picked it. And this is what he looks like with that easing. Looking a lot better so far. And that's the curve of the easing that we use. You'll notice it actually goes up past its destination and back. So I've been really sneaky and actually just used two animation principles besides one. When you go and overshoot your destination it's called follow through. And basically the idea is that you have so much energy you pass by where you're going and you're like oh yeah I'm back. And just doing that little bit which we can totally do just by changing our easing function which is kind of amazing. We just give that more energy of like oh I'm so excited to show you your reservation. Hey! And it really changes things even though he's still probably moving a little too slow. And I put him there twice. Not really sure why. So what I like to do is a nice trick is set my cubic Bezier to be SAS variables partly so I can look really smart. See that looks way cooler doesn't it? Yeah and also because this is a heck of a lot easier to read than a bunch of lists of cubic Bezier numbers. Like I know what those are. I know when I'm reusing the same one I read words better than numbers personally. So let's get a number three which would be secondary action. And this is one web designers have a tendency to really totally ignore and it makes me kind of kind of I don't know I start to laugh about it. Have you ever seen like a sliding carousel on websites? There's like a photo and text and like a box behind the text and they all move together like this then they like go off. And like the text and the image both leave the screen and then they come right back on in the same place and you're like why are they all moving together like they're attached. Doesn't think they're separate things right? You know so it's really secondary action of the idea that any supplemental action to the main action. So that's things like usually when they talk about cartoon characters it's like if the cat was walking and his tail's wagging. I guess he would do that more with a dog than a cat but like I said finds with a cat that's a bad thing with a dog that's a good thing. Just that secondary stuff that is reinforcing what's happening creating more of a mood but isn't really integral to the motion itself. So like what if we took our little white box and pretended like his text were you know kind of like appendages of sorts and they could move somewhat independently. Maybe he'd look a little bit more relatable a little bit more energetic and lifelike. He will because I've done this already that's where these slides came from. So to do that to add some secondary motion I'm going to add one more set of key frames. Basically a version of our slide in I'm just a little bit shorter. I changed my first y value to be 80 so it's moving a smaller distance and I'm going to end up making that actually start a little later to kind of stagger the animations a little bit. That's all I've added there. Then I'll go and add that animation to my headings and my paragraphs. So each of my text items is going to have that shorter animation and they're going to have a little bit of a delay. There's some extra variables in there because of code pen but you can pretend the global delay is not really there. And then when we put those in I guess something looks a little bit more like that. We're like oh he's got even more energies a little bit more relatable lifelike and I'm sort of getting this happier feeling about my reservation to go drink tea with cats. There's at least like two other people that think that's cool. You can come with me. And then as a very last step I know I said I was only going to do three but this is a very important last step. Speed the whole darn thing up. When we're working on animation of any motion on screen and we're designing it and like just nitpicking it and deciding exactly what every little pixel a millisecond should do we look at it really really slow and the time it takes to read that motion as someone seeing it for the first time is like an itty bitty tiny tiny fraction of what it took us to obsess over that. So essentially whatever the duration of your animation is cut it in half and then possibly half again and then it'll probably be fast enough. So back to a couple technical things. That was sort of the design half of it of like how to really get some messaging with your motion and I mean if we can pull that off in CSS imagine what you can do with like more capable programming languages. CSS can actually it can really hold its own despite its strange weird secret syntax and browsers are really starting to treat CSS animation as like more of a real thing that people are doing. They're starting to acknowledge that there are people like me out there writing CSS animation doing it a lot and who would like really appreciate some ways to debug their work. I don't know I hear that's kind of cool you know for the longest time up until probably with the last six months or so if you made a mistake in any of your animation code by the nature of CSS if a browser saw a line of CSS it didn't understand it would just skip it and ignore it. So if you made like any of the typos I did and you didn't have an audience to tell you you would save that to your website and you would see nothing and be like there's no errors no just nothingness. So you're basically left to write your own debugging tools which might sound like fun it's not. So browsers have thankfully started picking up on this and making some for us. Chrome has this awesome thing that's actually in Chrome proper where you can play pause and slow down all the animations on a page globally it is so amazing it is like the best thing ever it saved me so many hours of work. It only works on CSS animations and transitions and animations using the web animation API mostly I just told you that so I could say animation like 27 times in two sentences. It basically it doesn't work with JavaScript animations but with JavaScript you get like errors and you can log things to the console so you know you're fine. Firefox also has a similar tool where they have some play and pause and they actually separate out some animations as well so if you're a Firefox fan you are also totally good. This one is definitely in the Firefox developer build it's probably in Firefox proper as well. I don't really use Firefox but people on the other side of the office do though I'll ask them sometime. Chrome has also added a cubic Bezier kind of like inspector this one's only in Chrome canary right now so it's probably a couple versions before it gets to Chrome proper but like the rate browsers are going now that's probably like tomorrow. Anyway yeah browser jokes I'm like should I cut all those out no they're going to come out anyways but you can hover over any of those like ease in keywords any of those cubic Bezier when you're in the developer tools you mouse over any of those in the inspector and it'll give you this little pop-up and show you which curve you're using give you some other options of nice like pre-done options if you'd like them some of the like the keywords and other things you can even like arrow through them it's great and you can edit them too you can drag those handles get yourself new easing and it shows it to you both in a motion graph and kind of a frame by frame circle onion skin thing it's super helpful and you can actually do what we are doing testing different easing and seeing how it looks in the browser itself just keep playing it over and over change your easing you don't even have to like open a code editor it's great and what this is all leading up to for chrome is this this animation timeline that's coming soon which I think is just kind of possibly the best thing ever it's going to give us a little bit of you know indication of exactly what animations are taking place their duration with that black bar and then a little bit of a curve of the motion that they're using as well so you get all that information about these animations on a page right in the like developer tools it's so awesome this is technically pre-chrome canary but if you really want to check it out I know a sneaky way to do it and I might tell you so I mean this stuff is it's really great that this has all come up in the last six months the tools that we have to be able to do this have just improved so much like it makes it so much easier because we can actually you know see what's going on both edit and create in the browser as well as debug which is a huge huge time saver and it's it's really nice to see the browsers kind of like legitimize css animations in that sense and for them it's because they're going towards this like greater future web animation spec which is also wonderful but I love all this stuff I think it's it's really great so hopefully through all that I've convinced you I know I'm like how long is this video goodness they're showing 3d stop talking um so hopefully I've convinced you guys that css animation is something you might want to look into or do more of or if you tried it before you want to give it a try again um and uh lucky for you I sort of really like teaching people about css animation and I really like talking about it in case you haven't noticed I have a resource page on my site that lists off um a bunch of things for training about css animation a lot of articles about you know motion theory how to make ui animation that looks good feels good all that kind of stuff basically a longer version of what we talked about today um so that's some stuff to check out I also have a video screencast thing that I put together um where I post tutorials of css animation and also review other ui animation on the web talk about what it is they're doing why it's good and what makes it good um lots of opinions and stuff it's kind of it's it's pretty fun to like kind of talk through these things and say why they do things well or not um and if you're super into css animation specifically I wrote a tiny book about it um basically if you've ever read the css animation spec or looked at it and you're like these are not words what are you talking about that does not make sense um I wrote this little book to actually put those into normal human words so we could actually understand what they're saying because they don't use they're they make stuff up um so this is the actual readable English version of it um Lynn's read it and she liked it so it has to be good everyone's mentioned Lynn on stage so I figure I had to do it too um so that's a lot of bunch of stuff I put together if you want to learn more about css animation and I'm totally up for talking about it as well anytime um yeah and thanks so much for listening to me and having me at open bids is really great