CSS: Enhancing Interfaces with Animation

CSS: Enhancing Interfaces with Animation

1h 3mIntermediate2022-11-09

Authors

Christina Gorton

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

Introduction

  • Why animations
  • Using GitHub Codespaces with this course

Theory of Animation

  • Best practices
  • The 12 principles of animation
  • The 12 principles used in UI

Animation Choreography

  • Animation choreography
  • Sequencing and easing
  • Transformations
  • Focal elements

UI Animations

  • Creating button animations
  • Creating menu animations
  • Challenge - Create a card animation
  • Solution - Create a card animation

Conclusion

  • Moving on with animations
40,000 Toman