Transition Duration

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

.selector {
  background: var(--gray-100);
  transition: var(--transition-all);
  transition-timing-function: var(--transition-timing-function-ease-out);

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

Transition timing function variables

cubic-bezier(0.4, 0, 1, 1)
cubic-bezier(0, 0, 0.2, 1)
cubic-bezier(0.4, 0, 0.2, 1)

Interactive Example

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