在哪里放置 CSS3 过渡

Question

也许这是一个真正愚蠢的问题，但我无法忍受不知道答案所以我开始了：

一个简单的背景变化 CSS3 过渡可以放在元素本身上，也可以放在该元素的 :hover 状态上，这两者都有效！但是：什么是最佳实践？

示例：

.example {
  width: 100px;
  height: 100px;
}

.example:hover{
  background-color: blue;
  color: white;
  transition: all 2s ease-in;
}

这也有效：

.example {
  width: 100px;
  height: 100px;
  transition: all 2s ease-in;
}

.example:hover{
  background-color: blue;
  color: white;
}

谁能告诉我这是为什么？什么是最佳实践？

Answer 1

在第二种情况下，您将对所有事件进行转换。例如，您可能在 focus 上有另一个 CSS 选择器，那么该更改也会获得过渡效果并发生超过 2 秒。

在第一种情况下，转换仅应用于 hover 事件。

根据您想要实现的目标选择一项。

Where to place CSS3 transition