Как в 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 просто скрывается.

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

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

Answer 1

[ImagineTables]

Если правильно понял вопрос, попробуйте это (придётся подписаться на событие focusin):

// Resets CSS animation based on keyframes.
System.resetAnimation = function (elements)
{
	elements.forEach(element =>
	{
		element.style.animation = 'none';
		element.offsetHeight; // Trigger reflow.
		element.style.animation = null;
	});
}

Опять же, если я понял ваш вопрос правильно, можно обе анимации объединить на основе переменных, а в нужный момент задавать значение переменной, управляющее ходом анимации, и сбрасывать её. Примерно так:

const map = $('.map');
map
	.css('--current-position-y', getComputedStyle(map[0]).backgroundPositionY)
	.css('--direction', position.y > 0 ? '-1' : '1') // Map is scrolled in opposite direction.
	.css('--speed', Math.abs(position.y).toString());

System.resetAnimation([map[0]]);

@keyframes move-map-bg_map
{
	from
	{
		background-position-y: var(--current-position-y);
	}

	to
	{
		background-position-y: calc(var(--current-position-y) + var(--direction) * var(--city-map-size));
	}
}

Выше показано, как одна анимация плавно переходит в другую, в данном случае — на лету меняется скорость и направление анимации фона.