Html 使用不同的悬停标记为一行元素设置动画

我有一个用户名和密码部分，当用户将鼠标悬停在文本输入区域上时，相关文本会有一点反弹。

为了减少重复代码，我尝试使用“，”选择器组合代码。但是，这意味着当用户将鼠标悬停在.user字段上时，.password字段和.password也会显示动画

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

---

有没有办法在第一次悬停时不使后半部分动画化？问题不是CSS线性应用动画。

这个问题是由于我的第一个和第三个网格是自动的。自动意味着当网格内元素的边距改变时，它会改变网格的大小。随着尺寸的变化，它将分区缩小，使其看起来像其他元素在同时移动

TL；DR当自动更改为百分比时，它已修复。

最好尝试儿童概念。（最后一个子：悬停）