Question

Maybe this is a real silly question but I just can't stand not to know the answer so here I go:

A simple background change CSS3 transition can be placed on the element itself and also on the :hover state of this element and it both works! But: what is best practice?

Example:

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

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

this works as well:

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

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

Can somebody tell me why this is? And what is best practice?

Answer 1

在第二个场景中，您将对所有事件进行转换。例如，您可能在focus上有另一个CSS选择器，然后该更改也会获得过渡效果，并且会在2秒内完成。

在第一种情况下，过渡仅适用于hover事件。

根据您想要达到的目标选择一个。

Where to place CSS3 transition

1 个答案: