CSS: Enhancing Interfaces with Animation
1h 4mIntermediate2022-11-09
Authors
Christina Gorton
Web Development Instructor and Front-End Developer
Course details
Push your interfaces further and make websites more engaging by integrating animations throughout the site. In this course, learn how to leverage CSS to incorporate interactive animations that enhance features and layouts. Examine principles and best practices that should guide your use of animation. Find out how to use transitions, keyframe animations, and transforms to give users a better overall experience. Discover the importance of fine-tuning the duration, speed, and choreography of dynamic elements. See how to make buttons, menus, and cards more fun and inviting. Consider theories, practical uses, and more as you explore the use of movement in UI.
Skills covered
Interactive Web ContentCSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Why animations
- 02 - Using GitHub Codespaces with this course
1. Theory of Animation
- 03 - Best practices
- 04 - The 12 principles of animation
- 05 - The 12 principles used in UI
2. Animation Choreography
- 06 - Animation choreography
- 07 - Sequencing and easing
- 08 - Transformations
- 09 - Focal elements
3. UI Animations
- 10 - Creating button animations
- 11 - Creating menu animations
- 12 - Challenge - Create a card animation
- 13 - Solution - Create a card animation
Conclusion
- 14 - Moving on with animations