【问题标题】：Troubles getting CSS transition to work让 CSS 过渡正常工作的麻烦
【发布时间】：2012-04-04 20:17:39
【问题描述】：

我正在努力理解 CSS3 过渡，但我不确定我的理解是否有问题，或者浏览器是否不合作。

首先，我认为 Opera 应该支持过渡，因为版本 10 左右，但 transition 和 -o-transition 在 11.62 中似乎都没有做任何事情。还是 Opera 使用了不同的语法？

无论如何，我可以通过编写使背景颜色在与大多数其他浏览器一起悬停时淡入淡出

div {transition:background 2s;}
div:hover {background:lime}

到目前为止还可以，我也可以通过编写使背景淡入而不是淡出

div:hover {transition:background 2s; background:lime}

背景会淡出，但不会像这样：

div {transition:background 2s;}
div:hover {transition:background 0s; background:lime}

但我不明白为什么会这样。根据文档，具有0s 持续时间的转换不应该有任何影响，那么为什么最后一个有不同的结果呢？

【问题讨论】：

【解决方案1】：

我假设您正在寻找的是 ease 计时功能。

所以你的 CSS 规则应该看起来像这样。

.class {
    transition: property(ies) duration timing-function;
}

.class:hover {
    property(ies): new value;
}

对于 Opera，您必须定义确切的属性。在您的情况下，它不是 background 属性，而是 background-color 属性。

【讨论】：

【解决方案2】：

从您的示例看来，它的行为符合我的预期。从一种状态到另一种状态的转换。

我会尽力解释一下。

在最后一个上，<div> 处于正常状态时有 2 秒的过渡，<div> 处于悬停状态时有 0 秒的过渡。

那么发生了什么？

这是否解释了正在发生的事情以及转换如何工作？

【讨论】：

是的，我现在明白了。当然，我的第一个示例中的 div:hover 仍然是同一个 div，因此它也会获取 div 的转换值，除非你覆盖它。我没有直接得到 CSS 选择器。谢谢。