Барабанная ложка / Треска Минимальная форма Предыдущее поле анимации сбой

Question

Итак, я добавил кнопку «Назад» в форму Codrops , клонировал ту же функцию, что и «nextQuestion», в «prevQuestion» и внес некоторые изменения:

stepsForm.js

1. Итератор уменьшенного текущего вопроса --this.current;
2. Изменен класс 'show-next' на 'show-prev' в функции addClass / removeClass
3. Удалена проверка, поскольку все поля не являются обязательными

index.html

1. Добавлена ​​вторичная метка под элементом ввода

   <span class="info-message"><label>(some info)</label></span>

Эта метка и основная метка отлично и последовательно анимируют «moveUpFromDown» при нажатии кнопки со стрелкой следующего вопроса или клавиши Enter.Теперь я хочу использовать только противоположную анимацию, то есть «moveDownFromUp», когда запускается только что созданная кнопка предыдущего вопроса.

Вот что я добавил в свой css , чтобы заставить его работать

.show-prev .questions li > span label {
    display: block;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.show-prev .questions li.current > span label {
    -webkit-animation: moveDownFromUp 0.4s both;
    animation: moveDownFromUp 0.4s both;
}
@-webkit-keyframes moveDownFromUp {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}

@keyframes moveDownFromUp {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); transform: translateY(0); }
}

Теперь, когда я запускаю эту функцию, все работает отлично, за исключением анимации меток, возникает сбой (анимация не плавная), и основная метка мигает под вторичной меткой под входом во время анимации.Пожалуйста, найдите, если я сделал какую-либо ошибку до сих пор.

Буду признателен за ваши ценные предложения и отзывы.

PS Невозможно поделиться ссылкой на проект, так как я работаю на локальном сервере.