:root {
  --transition-smooth: all 300ms ease-in-out;
  /** @see https://easings.net/#easeOutQuart */
  --transition-snappy: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

[transition] {
  transition: var(--transition);
}

[transition="smooth"] {
  --transition: var(--transition-smooth);
}

[transition="snappy"] {
  --transition: var(--transition-snappy);
}