Permalink
Find file
8044b30 Oct 23, 2015
@gakimball @thiagotomasi
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)