Transitions

Transitions can animate anything from background color changes, and outline shapes of elements, to size change.

A simple ease-in and ease-out timing function applied through a Sass @mixin allows animating of multiple CSS properties.

CSS properties that can be animated

1. Background (including color, background image properties, etc.)
2. Border color
3. Border radii
4. Foreground color
5. Opacity levels*
6. Outline of elements
7. Transformation of elements (shape, size, etc.)*

* These are the preferred properties to animate since they are most performant.

Example animation tween

Hover over the element below to see the animation tween in action.