-
Find out how to create simple CSS animations such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more.
CSS animation offers a whole new way to bring motion to interactive projects. It's a core skill for web designers and developers and a feature users have come to expect from modern websites. This course presents a series of basic CSS animation projects: site features such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more.
Web designer Val Head introduces CSS transforms and transitionsâthe foundation of most CSS animationsâand shows how to keyframe simple animations and adjust their timing, fill, and direction. She also covers looping and chaining animations, animating HTML and SVG elements, and optimizing animation performance, and introduces the best tools and use cases for CSS animation. Start watching to get your brand in motion.
Overview
Syllabus
-
Introduction
- Welcome
- What you should know before watching this course
- Vendor prefixes and browser support
- Using the exercise files
- CSS transform basics
- Simple 3D transforms
- CSS transitions
- Challenge: Adding a transition
- Solution: Adding a transition
- Animation basics
- Use animation-delay and animation-fill-mode
- Use animation-direction
- Timing functions and easing
- Challenge: Adding keyframes to our animation
- Solution: Adding keyframes to our animation
- Infinitely looping animation
- Animate an element into place
- Pause and play with animation-play-state
- Animate 3D transforms
- Prepare an image to use as a sprite
- Animate sprite images with steps
- Chain multiple animations
- Challenge: Adding a third animation to the chain
- Solution: Adding a third animation to the chain
- Prepare an SVG for animation
- Export SVG from Illustrator
- Animate SVG with CSS
- When to use CSS animations
- High-performance animations
- Code organization and fallbacks
- Helpful online tools for animations
- Using browsers' animation inspection tools
- Next steps