Creating Animations with CSS

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:

• The creative challenge of what your animations should look like
• The technical challenge of bringing your vision to life.

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!

You will need

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.