Анимировать одну строку элементов с разными тегами наведения

Question

У меня есть раздел имени пользователя и пароля, когда пользователь наводит курсор на область ввода текста, коррелирующий текст анимируется с небольшим отскоком.

Чтобы уменьшить дублирование кода I попытался скомбинировать его с помощью селектора ','. однако это означало, что .password-field и .password также анимируются, когда пользователь наводит курсор на .user-field.

        .user-field:hover ~ .user , .password-field:hover ~ .password {
            animation-name: boing;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

Есть ли способ сделать это без анимации второй половины на первом висении?

Answer 1

Проблема была не в том, что CSS применял анимацию линейно.

Проблема была в том, что моя первая и третья сетки были автоматическими. Авто означало, что когда поле для элемента внутри сетки изменялось, оно меняло размер сетки. Когда размер изменился, это уменьшило деление и создало впечатление, что другие элементы движутся одновременно.

TL; DR Исправлено, когда авто было изменено на процент.