1h 56m – Intermediate
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.
Topics include:
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
Adding interactivity with JavaScript
Introduction – 4m 47s
Welcome – 41s
What you should know before watching this course – 58s
Vendor prefixes and browser support – 2m 11s
Using the exercise files – 57s
1. Understanding CSS Animations – 28m 16s
Animation basics – 6m 32s
Exploring animation delay and the fill-mode property – 6m 6s
Working with animation direction – 4m 49s
Understanding easing – 8m 47s
Challenge: Adding keyframes to our animation – 49s
Solution: Adding keyframes to our animation – 1m 13s
2. CSS Animation Building Blocks – 47m 37s
Creating a seamlessly looping animation – 6m 27s
Animating an element into place – 5m 43s
Playing and pausing an animation on hover – 6m 20s
Animating 3D transforms – 8m 6s
Preparing a sprite image for animation – 4m 55s
Animating the sprite image with steps – 5m 34s
Chaining multiple animations on one element – 8m 2s
Challenge: Adding a third animation to the chain – 46s
Solution: Adding a third animation to the chain – 1m 44s
3. Project: An Animated Infographic Illustration – 19m 54s
A preview of what we’ll be creating – 1m 10s
Setting up the HTML structure – 1m 48s
Adding the header animation – 5m 57s
Animating the data – 6m 8s
Adding interactivity with JavaScript – 4m 51s
4. Performance, Browser Support, and Fallbacks – 12m 44s
Why and when to use CSS animations – 4m 50s
Organizing animation code for semantics and fallbacks – 4m 51s
Crafting effective animations – 3m 3s
5. Tools for Creating CSS Animations – 3m 0s
Helpful online tools for creating and building animations – 3m 0s
Conclusion – 24s
Next steps – 24s