From the course: CSS: Enhancing Interfaces with Animation
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
The 12 principles used in UI - CSS Tutorial
From the course: CSS: Enhancing Interfaces with Animation
The 12 principles used in UI
- [Instructor] Now we can put the 12 principles of animation to use and see how to apply them to a user experience. In UI, a mobile menu or dropdown can be a great use case for squash and stretch. Another approach is to animate in larger objects from a squashed state to its original size. You'll see this a lot in UI where you have maybe a small image that grows bigger so that you can give more detail for something. It's great to add the squash and stretch to make the animation a little bit more realistic. For anticipation, you can use little hover effects to create anticipation for a user. A hover effect on a button below another element that leads a user to a different part of a site is a good example for this principle in action. The most common example of staging for UI elements is a loading screen. Whether that be a simple loading animation, skeleton screens, or a more complex animation that keeps a user's attention…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.