Animation with transitions

Upshot

• To make $ngAnimate work, you must download the ng_animate.js module from http://angularjs.org. Include it in your main app module to make it available.
• The ng_animate service automatically hooks into any CSS elements animations or transitions applied to the element. It causes enter end leave events to happen on a timeout, allowing you to apply CSS effects.

Transitions

Transitions provide a way to move smoothly from one state to another. For example, a hover effect could be applied slowly giving a pleasing fade.

Transitions are cut down animations. You can’t loop them, or set keyframes. They are simple, easy to apply, and work nicely.

To make an attribute transition smoothly from one state to another, use the transition property:

a {
  transition: all 2s linear;
}

You can animate all properties, or just a specific property. You can also specify a timing function.

a {
  transition: color 2s ease;
}

Choose from the following timing functions:

• ease
• linear
• ease-in
• ease-out
• ease-in-out

Animatable properties

Transitions don’t work with all properties, but do with most of the ones you would care about. A full list of animatable properties (for Firefox) can be found here

Full Keyframe Animation

Animation goes further than simple transitions by adding full keyframe based animation to CSS. This has several advantages, particularly in terms of performance. Because the browser is in charge of the animation it can optimise performance in a variety of ways, taking full advantage of the hardware.

Declaring Keyframes

To make this work, we must first declare the keyframes we want to use, like so:

@keyframes pop {
  from {
    font-size: 100%;
  }
  to {
    font-size: 500%;
  }
}

Adding our Animation

Once we have declared our animation, we can add it to the page like so:

h1 {
  animation-name: pop;
  animation-duration: 3s;
}

Declaring more keyframes

We can add in additional keyframes using percentages:

@keyframes pop {
  from {
    font-size: 100%;
  }
  50% {
    font-size: 1000%;
  }
  to {
    font-size: 500%;
  }
}

Here, we have added another keyframe at 50% of the way through the animation.