Published February 2017
Modern web sites and apps are full of impressive effects, subtle micro-interactions and smooth transitions. Motion adds wow factor, can improve user experience and add a slick professional feeling to even the simplest static site. To have your projects stand out, animation is a key component.
Animation is like a conversation that occurs between the User and our User Interface; the user performs actions and the UI communicates back. For example, we can animate elements off the screen when removing them, and animate them in when new elements are added. This simple transaction helps us understand where they went. It adds to our mental model of what we’re working with, and makes the interaction richer and more meaningful.
We can use animation to draw attention to certain elements of an interface or to tell stories and lead users on a journey from one step to the next.
CSS animations are a powerful design too for bringing the page to life. However, when considering animations as part of a project there are two challenges:
In this course you’ll learn about the benefits of adding motion to your projects and the principals of animations to help you craft the perfect experience. You’ll also learn all the technical aspects, process, syntax, and best practices for adding animation to your projects. Specifically you’ll learn about the transition, keyframes and animation CSS properties. We’ll also discuss timing functions to add character and discuss browser support and address accessibility concerns to ensure your animations aren’t distracting or cause motion sickness.
Animations are a key component of modern web design so there’s never been a better time to master all the details. Let’s get started!
To take part in this course you only need a text editor and a web browser. An understanding of HTML, CSS and some jQuery will be useful but you don’t need any prior animation experience.
Explore HTML5 animations with our short 5-part mini course Animating with the HTML5 Canvas. If you wish to take your CSS to the next level, I highly recommend reading CSS Master by Tiffany Brown, alternatively watch AtoZ: CSS for a CSS reference to CSS properties starting from A and wrapping up at Z.
Donovan Hutchinson has been designing and building on the web since the late 90s. During that time he saw the introduction of CSS, and watched it evolve and become better supported over time. As a webmaster and later product designer / developer, Donovan has helped many startups get their products in front of users, written and taught articles and courses, and continues to experiment with web technologies.