CSS: Animations (2013)
This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change.
- Understanding delay and fill-mode
- Dictating an animation's direction
- Using easing
- Adding keyframes
- Looping an animation
- Chaining multiple animations on one element
- Setting up the HTML structure
- [Voiceover] Hello, I'm Val Head, designer and consultant. I want to welcome you to CSS Animations. I'll show you some of the things you can do with CSS Animations, and what they're best at now and into the near future. We'll start with a solid foundation of the syntax of CSS Animations, we'll build a sample project to see some of it in practice, and cover lots of advice for how you can take advantage of animations in your own work. We'll finish things off with a discussion of browser support and helpful tools you can use to be more productive creating animations.
I'm really excited about the options that CSS Animations open up for us, and I hope you are too. So, let's get started.
CSS: Flexbox First Look187,006 Views
CSS: Frameworks and Grids247,920 Views
CSS: Advanced Typographic Techniques83,416 Views
Design the Web: Graphics and CSS Pseudo-Elements53,421 Views
CSS: Visual Optimization132,927 Views
PHP with MySQL Essential Training4,283,533 Views
HTML Essential Training3,833,338 Views
Git Essential Training2,861,219 Views
CSS: Page Layouts1,738,916 Views