CSS Animations and Transitions Course Overview
Transcript from the "Course Overview" Lesson
>> I want to get into what this workshop is actually going to be about. So of course we are going to be talking about animation principles throughout the workshop, what you should animate, what you shouldn't and just some nice subtle ideas for how to add animation into your existing websites and applications.
[00:00:19] But I also really want to emphasize that this is a creative workshop, so this workshop is going to be split into a few sections starting with the fundamentals where we're gonna be talking about CSS and also just different animation principles. Then we're gonna be going into transitions, CSS transitions and then we're gonna be going into the key frame animations and then choreographing between multiple things animating.
[00:00:45] And then we're gonna be talking about states and state transitions and even state machines and how those relate to animations and can help you think better about how you do different animations on your applications. We're also gonna be talking about layout animations, which is a more advanced topic, but it's very, very useful.
[00:01:28] One of them is going to be in a simple application where you are showing an email input and a subscribe button and you have to just intimate that simple form. And another one, we're actually going to be building a sample in flight app for a fictional front end airlines.
[00:01:46] And in that app, there's a lot of opportunities for you to animate. So the goal of each of these sections in lessons is for you to actually apply these techniques in whichever way that you want. So there's no right or wrong answers. It's just about, can I use this technique to achieve whatever effect that I want?
[00:02:06] And so my main goal in this workshop is to provide you all the techniques for you to bring your user interfaces to life. So that you can know, okay, if I want to add a transition here or add an animation there, I know exactly how to do it using CSS.
[00:02:42] So we're going really, really old school here, but the reason for that is because it should not matter which framework you're using, which libraries you're using, the same principles are going to apply. And you could use the techniques that you learned in this workshop in pretty much any framework or even no framework at all.
[00:03:00] For CSS, we are actually in this workshop going to be using a pre-processor called SAS, and we're going to be using the SCSS variance. Now, if you don't know SAS, then don't worry. The SCSS variance is completely compatible with the CSS. So if you don't know some of the helpful things that SCSS provides, just write normal CSS and it's going to work exactly the same.
[00:03:27] So, no worries about that. And if we have time at the end of the workshop, we're actually going to be doing what I've done with the key framers that we'd been doing for a few years, which I'm going to be taking a dribble. And we could work on this together, but we're going to be creating it and creating that animation completely from scratch.
[00:04:24] So again, the workshop is at github.com/davidkpiano/frontend-masters-css. And once you get this installed, all you have to do is run npm run dev or yarn dev. And so, that's going to spin up local host at port 3000 and that's where you could see this. And so this is the index page.
[00:04:55] In the index page, actually there's not much of anything. There's just basic HTML, and there's also this little ball here that I made. There's some styling for this page, but the reason I'm pointing this page out to you is because I actually want you to use this page as your scratchpad.