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

var(--transition-timing-function-ease-in)

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

var(--transition-timing-function-ease-out)

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

var(--transition-timing-function-ease-in-out)

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

Interactive Example

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