Campus Design System

Appearance

Transition Duration ​

Utilities for setting transition durations.

Class NameDuration
duration-short-1 --cds-sys-transition-duration: var(--cds-sys-motion-duration-short-1) /* 50ms */;
duration-short-2 --cds-sys-transition-duration: var(--cds-sys-motion-duration-short-2) /* 100ms */
duration-short-3 --cds-sys-transition-duration: var(--cds-sys-motion-duration-short-3) /* 150ms */
duration-short-4 --cds-sys-transition-duration: var(--cds-sys-motion-duration-short-4) /* 200ms */
duration-medium-1 --cds-sys-transition-duration: var(--cds-sys-motion-duration-medium-1) /* 250ms */
duration-medium-2 --cds-sys-transition-duration: var(--cds-sys-motion-duration-medium-2) /* 300ms */
duration-medium-3 --cds-sys-transition-duration: var(--cds-sys-motion-duration-medium-3) /* 350ms */
duration-medium-4 --cds-sys-transition-duration: var(--cds-sys-motion-duration-medium-4) /* 400ms */
duration-long-1 --cds-sys-transition-duration: var(--cds-sys-motion-duration-long-1) /* 450ms */
duration-long-2 --cds-sys-transition-duration: var(--cds-sys-motion-duration-long-2) /* 500ms */
duration-long-3 --cds-sys-transition-duration: var(--cds-sys-motion-duration-long-3) /* 550ms */
duration-long-4 --cds-sys-transition-duration: var(--cds-sys-motion-duration-long-4) /* 600ms */
duration-extra-long-1 --cds-sys-transition-duration: var(--cds-sys-motion-duration-extra-long-1) /* 700ms */
duration-extra-long-2 --cds-sys-transition-duration: var(--cds-sys-motion-duration-extra-long-2) /* 800ms */
duration-extra-long-3 --cds-sys-transition-duration: var(--cds-sys-motion-duration-extra-long-3) /* 900ms */
duration-extra-long-4 --cds-sys-transition-duration: var(--cds-sys-motion-duration-extra-long-4) /* 1000ms */
duration-extra-long-5 --cds-sys-transition-duration: var(--cds-sys-motion-duration-extra-long-5) /* 1500ms */

Applying Transition Duration ​

Apply transition duration to elements by adding the corresponding transition duration utility class.

duration-default
duration-none
duration-short-1
duration-short-2
duration-short-3
duration-short-4
duration-medium-1
duration-medium-2
duration-medium-3
duration-medium-4
duration-long-1
duration-long-2
duration-long-3
duration-long-4
duration-extra-long-1
duration-extra-long-2
duration-extra-long-3
duration-extra-long-4
duration-extra-long-5
html
<div class="[...] transition-all transform duration-extra-long-5 hover:scale-110"> ... </div>

Applying transition durations to all child elements ​

Apply transition duration to child elements by adding the corresponding child-transition duration utility class.

html
<div class="[...] child-transition-all child-duration-extra-long-5">
  <div class="[...] transform hover:scale-110"> ... </div>
  <div class="[...] transform hover:scale-110"> ... </div>
</div>