Permalink
Fetching contributors…
Cannot retrieve contributors at this time
82 lines (66 sloc) 1.67 KB

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)