麻烦越来越CSS过渡工作

Question

我试图让我的头周围CSS3过渡包裹着，我不知道是否有什么问题我的理解，或者如果浏览器不配合。

首先，我认为Opera应该支持转换，因为版本10左右，但是transition和-o-transition似乎都不会在11.62中做任何事情。或者Opera使用不同的语法？

反正，我可以通过编写

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

OK到目前为止做出的背景颜色淡入和淡出与大多数其他浏览器徘徊，而我也可以让这个背景淡入，但不出，以书面

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

和背景淡出，而不是像这样：

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

但我不明白为什么会发生这种情况。根据文档，一个0s持续时间的过渡不应该有任何效果，那么为什么最后一个会有不同的结果？

jsFiddle

Answer 1

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

我会尽力的解释，尽我所能。

在最后一个，你对<div> 2S的变迁理论在正常状态下和0的最后的那一个<div>过渡的悬停状态。

那么发生了什么？

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

这是否解释发生了什么以及转换如何工作？

Answer 2

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

所以你的CSS规则应该是这个样子。

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

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

对于Opera，您必须定义确切的属性。在你的情况下，它不会是背景财产，但背景色财产。