js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

swap

Browse Source
This commit is contained in:
Cory LaViska
2024-06-17 16:20:28 -04:00
parent 00ab1d9021
commit edc384890d
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/docs/theming/transitions.md
View File

@@ -28,14 +28,6 @@ layout: page
Transitions can make interactions more lively and emphasize the relationship between a user's action and its outcome.
### Easing
Easing controls the standard `transition-timing-function` used for transitions throughout Web Awesome.
| Custom Property | Default Value | Preview |
| ------------------------ | ------------- | -------------------------------------------------------------------------------------- |
| `--wa-transition-easing` | `ease` | <div class="swatch" style="transition: width 600ms var(--wa-transition-easing)"></div> |
### Duration
Web Awesome uses different transition durations to make it easy to track a component's state while minimizing sluggish or distracting movement.
@@ -46,4 +38,12 @@ Properties that change between frequent, incidental states, such as hover and fo
| ------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------ |
| `--wa-transition-slow` | `300ms` | <div class="swatch" style="transition: width var(--wa-transition-slow) var(--wa-transition-easing)"></div> |
| `--wa-transition-normal` | `150ms` | <div class="swatch" style="transition: width var(--wa-transition-normal) var(--wa-transition-easing)"></div> |
| `--wa-transition-fast` | `75ms` | <div class="swatch" style="transition: width var(--wa-transition-fast) var(--wa-transition-easing)"></div> |
| `--wa-transition-fast` | `75ms` | <div class="swatch" style="transition: width var(--wa-transition-fast) var(--wa-transition-easing)"></div> |
### Easing
Easing controls the standard `transition-timing-function` used for transitions throughout Web Awesome.
| Custom Property | Default Value | Preview |
| ------------------------ | ------------- | -------------------------------------------------------------------------------------- |
| `--wa-transition-easing` | `ease` | <div class="swatch" style="transition: width 600ms var(--wa-transition-easing)"></div> |