Dashvar covers most of the common transition configurations. Just use the transition variable for the kind of properties you want to transition. Then you can apply changes to those properties with other selectors or modifiers.

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

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

Transition variables

var(--transition-none)

none

var(--transition-all)

all var(--transition-duration-0) var(--transition-timing-function-ease-in-out)

var(--transition-colors)

background-color var(--transition-duration-0) var(--transition-timing-function-ease-in-out), border-color var(--transition-duration-0) var(--transition-timing-function-ease-in-out), color var(--transition-duration-0) var(--transition-timing-function-ease-in-out), fill var(--transition-duration-0) var(--transition-timing-function-ease-in-out), stroke var(--transition-duration-0) var(--transition-timing-function-ease-in-out)

var(--transition-opacity)

opacity var(--transition-duration-0) var(--transition-timing-function-ease-in-out)

var(--transition-box-shadow)

box-shadow var(--transition-duration-0) var(--transition-timing-function-ease-in-out)

var(--transition-transform)

transform var(--transition-duration-0) var(--transition-timing-function-ease-in-out)

Interactive Example

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