Rachel Nabors: I'm Rachel Nabors. And I have built everything from interactive demonstrations of Firefox's really cool web animation tools to interactive stories with Adobe Inspire. We'll be taking a closer look at Alice in Videoland a little bit later on in this course. And sometimes I even help clients bring animation to their motion design systems and style guides.
This is a more practical application of animation. And it's becoming even more popular these days. With things like Google's Material Design And IBM's motion design language coming out. And showing people how animation and motion are an important part of a healthy balanced approach to UX and design. I also run WebAnimationWeekly, which is an excellent newsletter on the comings and goings of this bustling space.
Animation has taken off, and it changes literally every week. So if you want to keep up, this is a nice little curated list to get in your inbox every week. What are we going to learn today? We're going to learn all about CSS transitions and animations. How do you use animation in product design.
All the different prefixes that some browsers may or may not require to work correctly. -prefix-free, what it does is you give it a style sheet with no prefixes in it. It compares it to whatever the browser supports. And if it sees that prefixes are needed, it injects some of that prefix CSS into the browser.
I do not recommend it for production work. We are using it here simply because I want you to focus on using this proper syntax. Not on remembering what prefixes to use. In a production environment you should use something like autoprefix or Sass mixins to handle that for you.
So bear that in mind. I will mention when certain prefixes are needed and with what browsers. But I do expect you to have some sort of a solution set up to handle that regularly for you. And lastly and most fun, we are going to be using CodePen for our experiments today.
I prefer to use CodePen over just handing you a big GitHub repo. Then spending an hour in the morning getting everyone's dev environment set up. Or telling where the files should be stored on your hard drive. CodePen is a lot of fun. It is a site that lets you, well, it's kind of like Dribbble for code, if you're a frontend developer.
If you would like to do this, I highly recommend you go to codepen.io now. And sign up for an account before we get started.