Adding a Transition #
Use d-t to add a transition to an element. It defaults to a duration of .d-td50, easing of .d-ttf-in-out, for all style properties. Override any of these with d-td* (e.g. d-td200) for a different duration, d-ttf-* (e.g. d-ttf-in) for a different easing, or d-tp-* (e.g. d-tp-bgc) for a different property.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t">Hover me</dt-button>
Changing Transition Duration #
Use d-td{n} change an element's transition-delay from it's default 50ms length.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td0 ">0ms</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t ">50ms</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td100">100ms</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td150">150ms</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td200">200ms</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300">300ms</dt-button>
Changing Transition Easing #
Use d-ttf-{n} change an element's transition-timing-function (aka easing) from it's default Quad Ease In, Ease Out value.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf ">Ease</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-in ">Ease In</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 ">Ease In, Ease Out</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out ">Ease Out</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint">Ease Out Quint</dt-button>
Changing Transition Property #
Use d-tp-{n} change an what items within an element are transitioned.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint ">All</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint h:d-o50 d-tp-o">Opacity</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint d-tp-bs">Box shadow</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint d-tp-bgc">Background</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint d-tp-transform">Transform</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t d-td300 d-ttf-out-quint d-tp-colors">Colors</dt-button>
Classes #
Class
|
Output
|
|---|---|
| .d-t |
transition-duration: var(--td50); transition-property: all; transition-timing-function: var(--ttf-in-out); transition-delay: 0s; |
| .d-td0 | transition-duration: var(--td0) !important; |
| .d-td50 | transition-duration: var(--td50) !important; |
| .d-td100 | transition-duration: var(--td100) !important; |
| .d-td150 | transition-duration: var(--td150) !important; |
| .d-td200 | transition-duration: var(--td200) !important; |
| .d-ttf | transition-timing-function: var(--ttf-ease) !important; |
| .d-ttf-in | transition-timing-function: var(--ttf-in) !important; |
| .d-ttf-in-out | transition-timing-function: var(--ttf-in-out) !important; |
| .d-ttf-out | transition-timing-function: var(--ttf-out) !important; |
| .d-ttf-out-quint | transition-timing-function: var(--ttf-out-quint) !important; |
| .d-tp-all | transition-property: all !important; |
| .d-tp-o | transition-property: opacity !important; |
| .d-tp-bs | transition-property: box-shadow !important; |
| .d-tp-bgc | transition-property: background-color !important; |
| .d-tp-transform | transition-property: transform !important; |
| .d-tp-colors | transition-property: background-color, border-color, color, fill, stroke !important; |
| .d-t-delay25 | transition-delay: var(--td25) !important; |
| .d-t-delay50 | transition-delay: var(--td50) !important; |
| .d-t-delay100 | transition-delay: var(--td100) !important; |
| .d-t-delay150 | transition-delay: var(--td150) !important; |
| .d-t-delay200 | transition-delay: var(--td200) !important; |
| .d-t-delay300 | transition-delay: var(--td300) !important; |