Dialtone

Transition

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

Classes

ClassOutput
.d-t transition-duration: var(--td25);
transition-property: all;
transition-timing-function: var(--ttf-in-out);
transition-delay: 0s;
.d-td0transition-duration: var(--td0) !important;
.d-td50transition-duration: var(--td50) !important;
.d-td100transition-duration: var(--td100) !important;
.d-td150transition-duration: var(--td150) !important;
.d-td200transition-duration: var(--td200) !important;
.d-ttf-in-outtransition-timing-function: var(--ttf-in-out) !important;
.d-ttf-outtransition-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-delay25transition-delay: var(--td25) !important;
.d-t-delay50transition-delay: var(--td50) !important;
.d-t-delay100transition-delay: var(--td100) !important;
.d-t-delay150transition-delay: var(--td150) !important;
.d-t-delay200transition-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>
Last Updated: