初始状态或最终状态的 CSS 转换属性？答案

【问题标题】：CSS transition properties on initial state or final state?初始状态或最终状态的 CSS 转换属性？
【发布时间】：2013-08-13 11:51:03
【问题描述】：

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

【问题讨论】：

on the final state or the final state 听起来让我很困惑。这是什么意思？
@Christoph：已编辑，处于初始状态或最终状态

标签： css css-transitions transition

【解决方案1】：

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

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

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

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

【讨论】：