1

我试图让我的头脑围绕 CSS3 过渡，我不确定我的理解是否有问题，或者浏览器是否不合作。

首先，我认为 Opera 应该从 10 版左右开始支持过渡，但在 11.62 中似乎也transition没有做任何事情。-o-transition还是 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持续时间的过渡不应该有任何影响，那么为什么最后一个有不同的结果呢？

jsFiddle

4

2 回答 2

3

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

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

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

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

对于 Opera，您必须定义确切的属性。在您的情况下，它不是背景属性，而是背景颜色属性。

于 2012-04-04T12:08:55.177 回答
1

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

我会尽力解释这一点。

在最后一个上，在其正常状态下的转换为 2s，在悬停状态下的<div>转换为 0s 。<div>

那么发生了什么？

  1. 当您将鼠标悬停在 上时<div>，状态将变为:hover，因此运行过渡div:hover。你有一个 0 的过渡，所以没有动画运行。
  2. 当您从状态中移除鼠标时，<div>状态会从:hover恢复到正常状态，因此div在其正常状态下运行转换。你有这个在2s。

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

于 2012-04-04T12:17:10.027 回答