使用不同的悬停标签对一行元素进行动画处理

Question

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

为了减少重复的代码，我尝试使用'，'选择器将其合并。但是，这意味着当用户将鼠标悬停在.user-field上时，.password-field和.password也会动画。

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

有什么方法可以做到而不会使后半部分在第一个悬停时动起来吗？

Answer 1

问题不是CSS线性应用动画。

问题出在我的第一个和第三个网格是自动的。自动表示当网格内元素的边距更改时，它会更改网格的大小。随着大小的变化，它使划分变小，并使其看起来像其他元素正在同时移动。

TL; DR当汽车更改为百分比时，此问题已修复。