Animations are a great way to add meaning and delight to any web experience (so long as they are done right).

Because our brains are wired to notice movement, creating moving pieces immediately grabs users' attention. It's important to use animations wisely, as they can easily distract a user from the task you want them to complete.

Done right, animations evoke visual interest, personality and delight.

The basics of animations

Animations have two main parts:

  • keyframes: define the stages and style of the animation
  • animation properties: assign the @keyframes to a specific CSS element as well as define how it will be animated.

Keyframes

Each @keyframes is composed of:

  • The name of the animation. The name should accurately describe the animation, for example bounceIn.
  • The stages of the animation. Each stage is shown with a percentage, with 0% being the very beginning of the animation and 100% being the very end. We can add various states between the beginning and end.
  • Properties defined for each part of the animation's timeline.

Animation Properities

  • animation-delay: specifies a delay for the start of an animation.
  • animation-direction: specifies whether an animation should play in reverse direction or alternate cycles.
  • animation-duration: specifies how many seconds (or milliseconds) an animation takes to complete one cycle.
  • animation-fill-mode: specifies a style for the element when the animation is not playing (which would be if it has a delay on it or when it is finished).
  • animation-iteration-count: specifies the number of times an animation should be played.
  • animation play state: specifies whether the animation is running or paused
  • animation-timing-function: specifies the speed curve of the animation.
  • animation-name: specifies the name of the @keyframes animation.

Creating an animation

The first step is to write some quick htmlto create our animation. I'm going to make a bouncing ball that changes colors as it bounces. I'll give it a wrapper to give it the appearance of bouncing within a set space. The wrapper isn't necessary for the animation, I just think it makes things look nicer. I'll also create a div simply called "ball," which I'll put the animation on.

The next step is to create the CSS class that contains the actual animation. After that, we use @keyframes to define that animation. For this example, we will create our bouncing ball by stlying the div we named "ball," and also add a style for animation. I'll call our animation "bounce," since it's creating a bouncing ball. You can name the animation whatever you want, but ideally it describes what the animation is doing.

The animationstlye is also where I'll set it to infinite so that it goes on forever, and 1.5s along with ease-in-out to define that each transition will take 1.5 seconds to ease in and out to the next one.

The final step is to define the animation using @keyframes. This animation is pretty simple. I'm going to give it different properties at different points using the percentages 0% (for the beginning), 50% (for halfway through) and 100% (for the end). At 0% the margin-top is 9 em, which will push it to the bottom of my wrapper. At 50% it's 0 em, which will pull it up to the top. Then at 100% it's once again at 9 em, pushing it back down.

Finally, adding a different color to each of the three stages causes it to change color.