Transition Duration

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

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

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

Transition duration variables

var(--transition-duration-0)
0.15s
var(--transition-duration-1)
0.3s
var(--transition-duration-2)
0.5s
var(--transition-duration-3)
1s

Interactive Example

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