Campus Design System

Appearance

Transition Delay ​

Utilities for setting transition delays.

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

Applying Transition Delay ​

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

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

Applying transition delays to all child elements ​

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

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