We’re going to learn about CSS transitions and animations. By the end of the book, you’ll have a good understanding of CSS animations as well as the tools to create and experiment with our own.

CSS Animation 101

Preface

“Tell me and I forget. Teach me and I remember. Involve me and I learn.” Benjamin Franklin 

Welcome

“Animation is about creating the illusion of life.” Brad Bird 

Why animate?

“You don’t learn to walk by following rules. You learn by doing, and by falling over.” Richard Branson 

Creative environments

Transitions

So far we’ve discussed why we animate, found some sources of inspiration, looked at tools and sites we might find useful for development, and learned what transitions are.

Animations

Now that we have introduced the transition and animation properties, it’s time to delve further into transitions and see some code!

Transitions in action

Now that we have seen the transition property in action, let’s look at the properties that go into transitions and what they mean.

Transitions properties

The timing function is a description of the rate at which the speed of the transition changes. Animations look lifeless when they occur at a fixed, linear pace. Using timing functions can make transitions more life-like.

Timing functions

So far we’ve covered how a transition creates the movement between one state and another. Next we’ll see what happens when we apply a single transition to an element with multiple changes, and how to use multiple transitions together to subtly improve our animation.

Multiple transitions

So far we’ve been using the transition property in CSS to animate between two states, a non-hover and a hover (or focus) state.

Transitions and JavaScript

Now that we’ve looked at the transition property, let’s take a deeper look at the animation property.

Animations in action

Before we work on more animation examples, let’s take a look at each of the animation properties.

Animation properties

So far we’ve been introduced to the animation properties, and had a chance to see how it relies on keyframes . Next we’ll cover keyframes in greater detail.

Keyframes in action

In this chapter we’ll be looking at how we can make use of multiple sets of keyframes running at the same time.

Multiple animations

We’ve covered a lot of detail so far! I hope it’s making sense.

Animation recap

Now that we’ve covered both the transition and animation property, let’s combine both into an animation with a hover effect.

Storytelling

Get out the popcorn! In this chapter we’ll have some fun making an SVG animation. We will be building the Star Wars movie title from the “The Force Awakens” trailer.

Star Wars

A popular use for animation on the web is adding movement to elements when the browser scrolls. In this chapter we’ll take a look at how to do this.

Revealing content on scroll

So far we’ve been looking at what animation on the web is, and how to create animation. Before we finish up for this course, let’s take a moment to think about what we can do to make sure we do right by our visitors.

Accessibility

You’ve completed CSS Animation 101! I hope you’ve enjoyed this book.

Now you know CSS animation!

Congratulations for finishing this introduction to CSS animation! I hope you’ve enjoyed it. Adding animation to your web projects is a great way to make them stand out.

Community Questions