Creating Animations with CSS

Bring your UI to life with CSS animations

Published Date February 2017

22 Videos

1 hours 19 minutes

3805 Happy Students

About the course

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.

What students say..

Donovan explains key concepts of web animation in short, logically consecutive bites, with lots of examples. Not only will you learn how to implement CSS transitions and animations, but also when to use each technique and overall best practices and principles of web animation. Great for those who already know how to work with CSS and a bit of jQuery and are eager to learn CSS animation.