css - 过渡不适用于多个属性

Question

我有一个 div，它定义了相对位置以及左、上和框阴影。当我写一个 div:hover 语句时，我试图转换这些属性中的每一个。它适用于单个属性，但不适用于 2 个或更多属性。这是否应该发生和/或我如何修复它以便可以发生多个转换。

我解决了hover前top和left没有定义的问题，但是同时有多个transition的时候还是没有解决

.faq-card {
                border-radius: 10px;
                border: 1px solid white;
                box-shadow: 10px 10px 10px rgba(216, 44, 44, .5);
                height: 100px;
                position: relative;
                left: 0px;
                top: 0px;
}
.faq-card:hover {
                box-shadow: 0px 0px 10px rgba(216, 44, 44, .5);
                left: 10px;
                top: 10px;
                transition: left 1000ms ease;
                transition: top 1000ms ease;
                transition: box-shadow 1000ms ease;
}

我希望 div 向右移动 10px，向下移动 10px，并且框阴影以过渡方式而不是生涩地淡入 div。然而，他们都在没有过渡的情况下立即执行此操作。感谢您的帮助

Answer 1

这是因为每个 transition属性覆盖了之前的属性。

如果您需要转换多个 属性，您可以使用all(这可能会导致您不想要的意外转换)或逗号分隔要改变的值

所以代替:

            transition: left 1000ms ease;
            transition: top 1000ms ease;
            transition: box-shadow 1000ms ease;

使用

            transition: left 1000ms ease, top 1000ms ease, box-shadow 1000ms ease;

请注意，通过这种方式，您可以在一条语句中为每个属性设置不同的时间和缓动函数。