Как в CSS остановить одну анимацию и сразу запустить вторую для одного элемента?

Question

[ymfront]

Есть 2 анимации:

@keyframes messageAnimation {
  0% {
    visibility: visible;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes hideErrorMessage {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

При добавлении полю класса _error выполняется первая анимация:

.form__promocode-input._error ~ .message_error {
  animation: messageAnimation 4s forwards;
}

При фокусе на поле класс _error удаляется, и нужно выполнить следующую анимацию:

.form__promocode-input:focus ~ .message_error {
  animation-play-state: paused;
  animation: hideErrorMessage 0.6s forwards;
}

Но анимация не выполняется. Блок .message_error просто скрывается.

Нужно при фокусе на поле остановить выполняющуюся анимацию, и новую продолжить с того момента, на которой остановилась первая.

Как это можно сделать?