Animation and 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
- Background (including color, background image properties, etc.)
- Border color
- Border radii
- Foreground color
- Opacity levels*
- Outline of elements
- 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.