Transition Delay

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.