CSS 初始状态或最终状态的过渡属性？

Question

我刚刚读过https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions。

有一个简单的例子如下：

<div class="box"></div>

和CSS：

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    transform:rotate(180deg);
}

当移动鼠标悬停在框上时，会按预期执行转换，例如从

.box

（初始状态）到

.box:hover

（最终状态）。 但是，当将鼠标移出框时，转换会反向执行，例如从

.box:hover

到

.box

。

我的问题是我们在初始状态还是最终状态上设置 CSS 转换属性？ 规范是否明确了这个问题？

Answer 1

您可以在转换的“向前”或“向后”状态上指定

transition-*

属性。它不仅仅需要在前者上。 转换模块有点暗示了这一点：

作者可以在指定触发转换的值的同一规则中指定“transition-duration”、“transition-timing-function”或“transition-delay”的值，或者可以同时更改这些属性当他们改变触发转换的属性时。由于影响转换的是这些“transition-*”属性的新值，因此这些值将用于转换到关联的转换值。

在下面的示例中，我在

transition-duration

上给出了 4 秒的

:hover

，但您会注意到，一旦您将鼠标移开，它就会返回到您在示例中指定的 1 秒值。您可以对其他动态伪类应用相同的规则。

http://jsfiddle.net/BZeQW/1/

Answer 2

我确信接受的答案是正确的，但由于某种原因我没有得到它。我必须亲自使用 JSFiddle 直到我弄清楚它。这就是 JSFiddle——如果你不喜欢阅读，你可以玩一下。

但这是我的答案：

都需要转换。但 CSS 继承就是为什么它看起来只需要在 one 上。 发生的情况是，如果将过渡放在

.box

上，

.box:hover

also 也会继承过渡，因为它仍然是

.box

。具有过渡的含义是，如果带有过渡的元素当前看起来不像它定义的样式，那么它将过渡到该样式。

如果您仅将过渡放在

.box:hover

上，则

.box

上不再有过渡。这就是为什么它不进行“反向”转换。

添加类而不是伪类也是如此，如我的 JSFiddle 中所示。