Transition
Utilities for controlling how an element transitions in and out of states.
Classes
| Class | Output |
|---|---|
| .d-t | transition-duration: var(--td25); 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-in-out | transition-timing-function: var(--ttf-in-out) !important; |
| .d-ttf-out | transition-timing-function: var(--ttf-out) !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; |
Adding a transition
Use d-t to add a transition to an element.
<div class="d-bgc-purple-300 h:d-bgc-yellow-300 h:d-bs-lg d-fc-white h:d-fc-dark d-t">...</div>
Changing transition duration
Use d-td{n} change an element's transition-delay from it's default 50ms length.
<div class="d-t d-td0">...</div>
<div class="d-t">...</div>
<div class="d-t d-td100">...</div>
<div class="d-t d-td150">...</div>
<div class="d-t d-td200">...</div>
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.
<div class="d-t d-td100">...</div>
<div class="d-t d-td100 d-ttf-out">...</div>
Changing transition property
Use d-tp-{n} change an what items within an element are transitioned.
<div class="d-t">...</div>
<div class="d-t d-tp-o">...</div>
<div class="d-t d-tp-bs">...</div>
<div class="d-t d-tp-bgc">...</div>
<div class="d-t d-tp-transform">...</div>
<div class="d-t d-tp-colors">...</div>