Utilities for controlling how an element transitions in and out of states.


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.

Changing transition duration

Use d-td{n} change an element's transition-delay from it's default 50ms length.

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.

Changing transition property

Use d-tp-{n} change an what items within an element are transitioned.