Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
This tutorial will be a little bit less technical. We'll explore what makes the animation effective, and we'll discuss what we often use animations for, and where they can make the most effective impact on your design. I'm sure you've heard the quote, "With great power comes great responsibility." I doubt a questionable use of CSS animations would really ever cause true harm, but using them intelligently will go far to making you look smart and having your audience to really connect with your content. In general, we use animations in user interface design to do one of the following, to attract our users' attention to a certain area, like it or not movement really grabs our attention, and that's one of the reasons banner ads are so hard to ignore.
We might also use it to hide or reveal content in a slider or drawer type UI setting. We might use it to illustrate or demonstrate a product feature. And we might use it to provide cues and clues for our users, to make a button stand out a little more, or to show that something has changed in a dynamic interface. In these situations, it's of the utmost importance that the animations we create work for our users not against them. Usually this means keeping them slightly understated and making sure they react immediately when they happen in response to users' input. No one wants to wait for the button they just clicked to reveal the content they've requested.
All the items in that list are factors that determine how your interface behaves. But animations can also greatly affect the experience of your site or app. Animations can be used as an additional design detail to convey your overall concept and the personality of your site. Imagine a site about gardening that uses natural and earthy colors throughout the design. Adding animations to this site that use soft organic feeling movement would further the natural and botanical concepts used in the design. Conversely, fast overly bouncy animations would really distract from the concept.
Let's look at a couple of real life examples of this as well. In YouTube's site 1 Hour Per Second, the animations that they use are nice and quirky and have a little bit of bounce to them and kind of really fit with the illustration style which is also a little bit imperfect and definitely fits with the copy, which is a little bit funny. So these quirky animations really fit in with the overall concept. Another real life example that's a little bit different would be the Google+ Circle Editor. This one is a little bit different where the animation actually happens as part of the interface you're interacting with.
When you select a group of friends and then go to move them, they're animated in place under a paper clip. So, these both add a little bit of interest to the UI, but it also is very informative. It shows you, you have three people, all selected in one place, and you're ready to move them together and drop them in anyone of your circles. The best way to know for sure if your animation fits with your design is to test how it feels. Build a prototype and try using it yourself. Have other team members or friends try it too. How does it feel to you? What message do you get from it? Does it seem too fast or too slow or too laggy? Iterate on this prototype until you get something that feels right for your design.
It's nearly impossible to know what will work when it comes to animating, until you try it. The more you try, the more you'll get a feel for developing effective and elegant animations.