biofriction-wp-theme/node_modules/motion-ui/docs/classes.md

82 lines
1.7 KiB
Markdown
Raw Normal View History

2021-10-26 14:18:09 +02:00
# 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)