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)