Animation is hot right now. Adding motion to your UI can add a polished feel as well as bring attention and context to interactions. Last week, we released an open-source Sass animation library, Motion UI, on the ZURB Playground. So this week we’ll cover the basics of how to use animations and transitions in your projects.

Transitions vs. Animations

What’s the difference?

• Transitions tell an element "whenever this property changes, animate it."
• Animations are a series of effects that "play" on an element. It's like After Effects!

Transitions

Transitions let you "mark" CSS properties to be animatable.

.button {
  background: blue;
  transition: background;

  &:hover {
    background: red;
  }
}
                            

Multiple properties can be transitioned as well. Separate each one with a comma.

.button {
  background: blue;
  width: 100px;
  transition: background, color;

  &:hover {
    background: red;
    width: 200px;
  }
}
                            

Transitions can also have a length and a timing function.

.button {
  background: blue;
  width: 100px;
  transition: background 0.5s ease-in, width 1s linear;

  &:hover {
    background: red;
    width: 200px;
  }
}
                            

Transitions fire when a marked property changes for any reason. This includes:

• Hover/active/focus states
• A class being added that changes a property
• JavaScript code changing the property directly
• You checking/unchecking boxes in the Inspector

Common uses for transitions:

• Animating hover/focus states on things like Buttons, form fields, etc.
• Animating in/out hidden elements on things like Off-canvas menu, panels, etc.

Some example demos using Transitions

• Sliding Menu
• Grid Navigation
• Fancy Buttons

Animations

An animation is an effect that can be "played" on an element, like a video. Animations are made up of two or more keyframes.

To start, you need a keyframe set. Each number inside is a keyframe. 0% is the start of the animation, and 100% is the end. You can add more numbers in between.

@keyframe spin {
  0% {
    // CSS goes in here!
  }
  100% {
    // CSS goes in here!
  }
}
                            

In this example, an element will rotate from 0 degrees to 360 degrees (a full turn). The effect will be animated, like a transition.

@keyframe spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
                            

Adding more keyframes allows you to chain effects together.

@keyframe spin {
  0% {
    color: red;
  }
  // This happens halfway through the animation
  50% {
    color: blue;
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

                            

After creating a keyframe, you apply it to an element with the animation property. You need a name and duration for it to work.

.element {
  animation: spin 1s;
}
                            

You can also set a timing function, an initial delay, and a repeat count.

// Add an easing effect
.element {
  animation: spin 1s ease-in-out;
}

// Add a 2s delay, and make the animation loop forever
.element {
  animation: spin 1s ease-in-out 2s infinite;
}
                            

Animation Examples

This is just a taste of what you can do with CSS animation. Check out these advanced examples for inspiration:

• Animated Material Design
• Loading Animation
• Marvel Logo