transition.css

/** Transition duration */
:root {
  --transition-duration-base: 300;
  --transition-sequence: var(--golden-ratio);
  --transition-timing-function: ease;

  --transition-duration: calc(
    var(--transition-duration-base) * var(--timing-unit)
  );
  --transition-duration-shorter: calc(
    var(--transition-duration-short) /
    var(--transition-sequence)
  );

  --transition-duration-short: calc(
    var(--transition-duration) /
    var(--transition-sequence)
  );

  --transition-duration-long: calc(
    var(--transition-duration) *
    var(--transition-sequence)
  );

  --transition-duration-longer: calc(
    var(--transition-duration-long) *
    var(--transition-sequence)
  );
}

/** Transition delay */
:root {
  --transition-delay-base: 100;
  --transition-delay: calc(
    var(--transition-delat-base) * var(--timing-unit)
  );
  --transition-delay-sequence: var(--major-third);

  --transition-timing-function: ease;

  --transition-delay-shorter: calc(
    var(--transition-delay-short) /
    var(--transition-sequence)
  );

  --transition-delay-short: calc(
    var(--transition-delay) /
    var(--transition-sequence)
  );

  --transition-delay-long: calc(
    var(--transition-delay) *
    var(--transition-sequence)
  );

  --transition-delay-longer: calc(
    var(--transition-delay-long) *
    var(--transition-sequence)
  );
}