Dashvar covers most of the common transition-delay configurations. We recommend using the transition variables and then applying the changes to the transition-delay as the following example illustrates:

.selector {
  background: var(--gray-100);
  transition: var(--transition-all);
  transition-delay: var(--transition-delay-2);
}

.selector:hover {
  background: var(--yellow-200);
}

Transition delay variables

var(--transition-delay-0)

0.15s

var(--transition-delay-1)

0.3s

var(--transition-delay-2)

0.5s

var(--transition-delay-3)

1s

Interactive Example

Feel free to play with this interactive example to get comfortable with the tool.