82 lines
1.7 KiB
Markdown
82 lines
1.7 KiB
Markdown
|
# 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](configuration.md);
|
||
|
|
|
||
|
|
## 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)
|
||
|
|
|
||
|
|
|
||
|
|
|