Creating Animations with CSS

4.8 Average Customer Rating

Bring your UI to life with CSS animations

  • 22 Videos
  • 1 hours 19 minutes
  • 5091 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.

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.

  • 22 Videos
  • 1 hours 19 minutes
  • 5091 Happy Students

Courses Outline

Lesson 1: Animating in the Browser
Free
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
  • 22 Videos
  • 1 hours 19 minutes
  • 5091 Happy Students