Hypothetical @transition syntax

at-transition-syntax.css

@transition from (.button:not(.button-depressed)) to (.button.button-depressed) {
  background-color: red;
  transition-delay: .2s;
  transition-duration: .7s;
}

@transition from (.button.button-depressed) to (.button:not(.button-depressed)) {
  background-color: black;
  transition-duration: .2s;
}

@transition from (.button:not(.button-depressed) .button-arrow) to (.button.button-depressed .button-arrow) {
  transform: rotate(180deg);
  transition-duration: .1s;
  transition-timing-function: ease-in-out;
}

@transition from (.button.button-depressed .button-arrow) to (.button:not(.button-depressed) .button-arrow) {
  transform: rotate(0deg);
  transition-duration: .1s;
  transition-timing-function: ease-in-out;
}