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;
    -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}

当移动鼠标悬停在框中时，转换按预期执行，例如从.box（初始状态）到.box:hover（最终状态）。但是，当移开鼠标时，转换会反向执行，例如从.box:hover到.box。

我的问题是我们在初始状态或最终状态下设置CSS过渡属性？规范是否澄清了这个问题？

Answer 1

您可以在转换的“前进”或“后退”状态中指定transition-*属性。它不仅需要在前者上。 transition module类型暗示了这一点：

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

在下面的示例中，我在transition-duration的4s上给出:hover，但是一旦你鼠标移出它就会注意到它返回到你在示例中指定的值1s。您可以将同一规则应用于其他dynamic pseudo-classes。

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

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

1 个答案: