Learn how to use CSS animations and transitions to enhance your web applications with powerful, information-rich motion and color.
(up-tempo Asian beat) - I'm Rachel Nabors, and I have built everything from interactive demonstrations of Firefox's really cool web animation tools, to interactive...
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.
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 the proper syntax, not on remembering what prefixes to use. In a production environment, you should use something like Autoprefixer 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 and, you know, then spending an hour in the morning getting everyone's dev environment set up, or telling you where the files should be stored on your hard drive.
Note: This course was created by Frontend Masters. It was originally released on 09/15/2016. We're pleased to host this training in our library.
- CSS transitions and animations
- Using animation in product design
- Creating a sprite animation with CSS
- Stateful transitions and supplemental animations
- Using developer tools to manipulate animations
- Jump cuts and in-betweening
- Static vs. dynamic animations
- Designing performant animations