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，您必须定义确切的属性。在您的情况下，它不是背景属性，而是的背景颜色特性。

Answer 2

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

我会尽力解释的。

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

那么发生了什么呢

1. 将鼠标悬停在<div>上时，状态将更改为:hover，因此将运行div:hover的转换。您有一个0s的过渡，因此不会运行任何动画
2. 从<div>中移除鼠标时，状态将从:hover变回正常，因此div在其正常状态下的转换将运行。你2点有这个

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