麻烦让CSS转换工作

Question

我试图让我的脑袋围绕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持续时间的转换不应该有任何影响，那么为什么最后一个具有不同的结果呢？

jsFiddle

Answer 1

我认为你要找的是ease计时功能。

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

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

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

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

Answer 2

从你的例子来看，它看起来像我期望的那样。 转换从一种状态运行到另一种状态。

我会尽力解释这个。

在最后一个上，<div>处于正常状态时会有2s的传递，而<div>处于悬停状态的转换为0。

那发生了什么？

1. 当您将鼠标悬停在<div>上时，状态会更改为:hover，因此会运行div:hover的转换。你有一个0的trasition所以没有动画运行。
2. 当您从<div>移除鼠标时，状态从:hover更改回正常状态，因此运行div处于正常状态的转换。你有2s这个。

这是否解释了发生了什么以及过渡如何发挥作用？