Creating Animations with CSS


 40 Reviews Add a review

Published February 2017

Bring your UI to life with CSS animations

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!

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.

Oh yeah, and the whole SitePoint library! Learn More.

What you'll learn

  • Create beginning and end states, with transitions in between
  • Create more complex animations using keyframes
  • Use timing functions to sculpt the look and feel of animations
  • Closed captions available
Meet your instructor
Donovan Hutchinson

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.

Lesson 1: Animating in the Browser
Introduction 1:47
Why Animate our UI? 2:19
Principals of Animation 3:03
Setting up our Environment 2:18
Why Not Javascript? 2:08
Lesson 2: Transitions - From A to B
Introduction to Transitions 3:09
Activating Transitions 7:06
Lesson 3: Keyframe Animations
Creating Keyframes 7:07
Using Keyframe Animations 13:15
Quiz
Lesson 4: Easing and Timing Functions
Introduction to Timing Functions 2:13
Using Easing and Cubic Bezier Curves 8:06
Lesson 5: Putting it all Together
When to Use Transitions, When to Use Animations 2:26
Multiple Transitions 3:12
Multiple Animations 3:33
Activating Animations on Scroll 3:56
Quiz
Lesson 6: Browser Considerations
Browser Compatibility 5:20
Performance Considerations 4:35
Lesson 7: Accessibility and Animations
Minimising Distraction and Motion Sickness 3:09
Quiz
Lesson 8: Course Conclusion
Wrap up and next steps 1:05

Leave a Review