Html CSS3转换时间问题

我正在编写一个小的php脚本，当我使用Transitions css3 proprety时，我遇到了一个问题。当我使用transition时，我不知道为什么当用户悬停按钮，改变背景需要1s时，它工作得很好，但当用户将鼠标移出按钮时，它不需要1s，它会立即改变。

.b{
宽度：100%；
}
b:悬停{
背景：#fff；
过渡：1s；
}
盘旋我

将转换置于基本状态，它将双向工作

编辑：某些浏览器需要基值才能转换到/从中转换。此外，如果不定义我正在转换的内容，我不会设置转换

此外，我倾向于不转换快捷方式属性。理想情况下，这应该只是过渡背景色

.b{
    width:100%;
    transition:background-color 1s;
}
.b:hover{
    background-color:#fff;

}

---

-修订

按钮有焦点，将其添加到css中。这里有两个问题，

转换：1s

应该在

规则中声明。b

规则（正常状态）不在

：悬停

规则中。第二，即使第一次修复，它仍然不起作用。这是因为按钮的默认背景似乎无法设置动画。你必须为你的按钮设置一个明确的背景，实际上它是背景色，因为只有IE11支持背景转换。选中此项谢谢按钮，它可以很好地工作，但唯一的问题是，当我在li的基础上创建它时，当我加载页面html时，它也需要1s才能以li的正常样式显示。您在哪个浏览器中测试了此演示？看起来它在Opera、Chrome、FireFox中都不起作用，只有IE11似乎在为它制作动画，但效果不清楚，甚至很难看（可能是因为IE11支持背景转换）。@user3756377你说它工作得好是什么意思？我不能让它工作。它只是以一种方式设置动画，另一种方式（鼠标离开后）直接进入背景，除非您在实际代码中为按钮（某处）指定了明确的背景。我的示例只是演示。在Chrome中工作，尽管某些浏览器需要转换到/从基本值。此外，如果不定义我正在转换的内容，我不会设置转换。-啊，是的，事实上我刚刚在Chrome上进行了测试，它只在Chrome上工作（我认为Opera现在与Chrome非常相似，所以我刚刚在Opera上进行了测试，认为它在Chrome上是一样的）。

.b{
    width:100%;
    transition:background-color 1s;
}
.b:hover{
    background-color:#fff;

}