Как изменить transition-delay на “обратном пути”?

Чтобы понять, я приведу код-пример:

<header>
  <section class="intro">
    <article>
      <!-- Описание -->
    </article>
  </section>
  <menu>
    <ul>
      <li><a>Сюда нажимать, чтобы показать скрытый контент</a></li>
      <li><a>Сюда нажимать, чтобы показать скрытый контент</a></li>
      <li><a>Сюда нажимать, чтобы показать скрытый контент</a></li>
      <li><a>Сюда нажимать, чтобы показать скрытый контент</a></li>
    </ul>
  </menu>
</header>
<main>
  <section class="content-section is-hidden">
    <!-- Скрытый контент -->
  </section>
</main>

Писать JS нет смысла, потому что все просто: 4 кнопки = 4 секции с контентом (код сильно упрощен выше). По нажатию кнопки , в class="intro" добавляется is-hidden-intro. Он сразу же исчезает получая определенные стили для красоты. А class="content-section" красиво появляется через transition-delay: .375s; т.е через 375мс. Вопрос: как мне правильно изменить transition-delay, что бы когда class="content-section" был показан, по клику он сразу же исчезал, а class="intro" появлялся через 375мс? Как мне изменить "обратный путь" transition-delay для class="content-section"?