Transition
Utilities for controlling how an element transitions in and out of states.
Adding a Transition
Use d-t to add a transition to an element.
<dt-button kind="unstyled" class="d-p16 d-bar8 d-bgc-moderate h:d-bgc-critical h:d-bs-md h:d-fc-critical d-t">...</dt-button>
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>
<div class="d-t d-td300">...</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>
<div class="d-t d-td100 d-ttf-quint">...</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>