过渡不适用于多个属性

Question

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

我解决了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 1000ms ease;

它将影响所有更改

Answer 2

这是因为每个 transition 属性都会覆盖之前的

如果您需要转换多个属性，您可以使用 all（这可能会导致您不想要的意外转换）或 逗号-separate 要更改的值

所以代替：

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

使用

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

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

过渡不适用于多个属性

Transition Doesn't Work with Multiple Attributes

css

transition