CSS Classes

The Sass mixins are the heart of Motion UI, but the library also includes many pre-made CSS classes to get you up and running faster.

Defaults

The pre-made classes all use these transition/animation defaults:

• Speed: 500ms
• Timing: Linear
• Delay: 0s

These defaults can be changed by modifying the Motion UI settings;

Transition Classes

• Slide:
  • .slide-in-down
  • .slide-in-left
  • .slide-in-up
  • .slide-in-right
  • .slide-out-down
  • .slide-out-left
  • .slide-out-up
  • .slide-out-right
• Fade:
  • .fade-in
  • .fade-out
• Hinge:
  • .hinge-in-from-top
  • .hinge-in-from-right
  • .hinge-in-from-bottom
  • .hinge-in-from-left
  • .hinge-in-from-middle-x
  • .hinge-in-from-middle-y
  • .hinge-out-from-top
  • .hinge-out-from-right
  • .hinge-out-from-bottom
  • .hinge-out-from-left
  • .hinge-out-from-middle-x
  • .hinge-out-from-middle-y
• Scale:
  • .scale-in-up
  • .scale-in-down
  • .scale-out-up
  • .scale-out-down
• Spin:
  • .spin-in
  • .spin-out
  • .spin-in-ccw
  • .spin-out-ccw

Animation Classes

• .shake: shakes the element horizontally.
• .wiggle: rotates the element back and forth.
• .spin-cw: rotates the element once.
• .spin-ccw: rotates the element once, counterclockwise.

Modifier Classes

Modifiers work with both transitions and animations.

• Speed:
  • .slow (750ms)
  • .fast (250ms)
• Timing:
  • .linear
  • .ease
  • .ease-in
  • .ease-out
  • .ease-in-out
  • .bounce-in
  • .bounce-out
  • .bounce-in-out
• Delay:
  • .short-delay (300ms)
  • .long-delay (700ms)