2

我刚刚阅读了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 转换属性？规范是否阐明了这个问题？

4

1 回答 1

2

您可以指定transition-*转换的“正向”或“反向”状态的属性。它不仅需要在前者上。过渡模块暗示了这一点：

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

在下面的示例中，我给出了transition-duration4s:hover的值，但您会注意到，一旦您将鼠标移出，它就会回到您在示例中指定的 1s 的值。您可以对其他动态伪类应用相同的规则。

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

于 2013-08-13T11:59:32.480 回答