CSS Animations and Transitions Introduction
Transcript from the "Introduction" Lesson
>> Hi, my name is David Khourshid, and I'm really excited to give this workshop on Frontend Masters about CSS animations. So I've been a web developer for over ten years. And I've been actually really passionate about CSS animations, frontend technologies, and cutting edge user interfaces. So one of my favorite things to do is actually take dribbles and recreate them in just pure CSS.
[00:01:32] So I also really got into state machines. And I do have some courses on Frontend Masters about X-state and state machines that I really encourage you to check out, because state machines are actually really related to animations as well. Take this choose or design your week example. We could select the days of the week, throw them away.
[00:02:19] So I will be going over that in this workshop, and we're gonna be going over a lot of things actually. One of the things we're gonna be going over is also layouts animations, which are actually pretty common, but they're not the easiest to implement. So I'm really excited to talk about techniques that we could use for doing that.
[00:03:00] So that we could share these dynamic values between both realms, and create some really cool animations as a result. So for a while, I've been actually doing a live stream called the keyframers about every week or every other week with my friend, Steven Shaw, in Texas. And so on the keyframers, we make animations from dribbles, basically, that we just find really interesting, like I talked about.
[00:03:47] There's gonna be no frameworks in here, and we're actually also going to be using SCSS, which is a Sass preprocessor language that really looks and feels like CSS. If you don't know SCSS, then don't worry, because you could use normal CSS in SCSS, and it's going to work just fine.
[00:04:06] But we'll explain some of the SCSS specific things in this workshop. So why are CSS animations important? It seems like something that we could just sprinkle on to websites. And it always seems like an afterthoughts too, just because CSS animations and animations in general aren't really often talked about when we're talking about designing websites or implementing functionality.
[00:04:35] But they're actually really important. In general, animations bring user interfaces to life. And that's why I really enjoy when I see a website or a web app with some thoughtful, meaningful animations. And that's important, because animations need to be subtle. But they also need to be meaningful, in that they guide the user to doing something, or to indicating what can be done, or to telling the user, this is something that just happened.
[00:05:06] And so this is important for the explainability aspect. When a user is using your application, they want to understand in an intuitive way just what is happening in the app or the website. And so there is a lot of examples of websites that really do this well. I really like Linear, both their landing pages.
[00:05:27] And also the actual web app has some really nice subtle animations that really clue in onto this just disappeared, this just appeared, this came from here, this is going there. It really brings that extra layer polish to the user interface, and to the user experience as well. Stripe, of course, is another great example.
[00:05:49] Of course, their menu is just beautiful to look at. And also they have nice subtle animations on things like buttons, where you could see the arrow is sort of moving to the right. And so this is the kind of thing that really makes you trust the software that you're using and also brings delight to the user, so that they're encouraged to use the websites and the applications a lot more.
[00:06:15] And you could get really whimsical with this. So this is the Superlist website, where it's having a lot of fun with some reactive animations. And it also indicates what this app is about in terms of feel. So we could see that this app is just something like a notepad, where we have these pen marks, and these are even animated.
[00:06:39] So if we scroll down, you could see just different things being highlighted. And yeah, so this is a great example of animation too, where it doesn't have to be sterile or super subtle. It really depends on what kind of design you wanna go for. But the main point is that I really want you to make designs or animations that are meaningful and delightful and also not too obtrusive.
[00:07:07] And one of the biggest reasons I'm giving this workshop too is because animation and motion design, in general, should be part of the way that you think about designing and implementing user interfaces. And in fact, a lot of the techniques that we're gonna talk about apply to just better CSS techniques in general, even if you're not using animations.
[00:07:55] To get started, you just run npm install in the root of this repo, and then npm run dev. So what this is going to do is it's going to start our app at localhost:3000, where there's a bunch of lessons in here, and also an in-flight example. So this is what it's going to look like.
[00:08:17] We have all the lessons on the main page over here, and a ball over here, and this is going to be useful as a scratchpad. So in case you want to try any of the animation techniques that we talked about, go to index.html or style.scss on the root of this repo, and you could animate this ball.
[00:08:36] And we're gonna be working from this scratch pad, index page a lot in this workshop. So we're going to be making a few examples. One of them is this signup form, where we're going to be adding some subtle animations to it, including state-based animations. And of course, you could get as whimsical as you want.
[00:09:24] And then finally, we're going to be seeing how we could apply these kinds of animations to a real world app, or at least, a shell of one. So this uses state-based animations, transitions, and things like that, in order to give this app a nice, smooth feel. So I just want to remind you that this workshop, of course, is about CSS animations, which means that it is a creative workshop.
[00:10:12] And the exercises we're going to be doing in this workshop, like I said, there's no wrong answers. So I really encourage you to be creative, and add whatever kinds of animations that you would like in there.