在哪里应用CSS过渡？

Question

我应该将transition属性应用于element还是应用element:pseudo-class？

什么是可取的，

p {
  color: blue;
  transition: 2s 22ms
}

p:hover {
  color: red
}

或

p {
  color: blue
}

p:hover {
  color: red;
  transition: 2s 22ms
}

Answer 1

这取决于你想要达到的目标。

第一个选项：

  

您的蓝色文字 - ＆gt; mouseover - ＆gt; 过渡效果 - ＆gt;你的文字   红色 - ＆gt; mouseout - ＆gt; 过渡效果 - ＆gt;你的文字是蓝色的

第二个选项：

  

您的蓝色文字 - ＆gt; mouseover - ＆gt; 过渡效果 - ＆gt;你的文字   红色 - ＆gt; mouseout - ＆gt;你的文字是蓝色的

根据您的需要选择。

Answer 2

如果希望转换根据伪类而不同，则必须使用第二个选项。但如果你不在乎，请使用第一个。

input {
  color: blue
}

input:hover {
  color: red;
  transition: 2s 22ms
}

input:focus {
  color: red;
  transition: 3s
}

input:active {
  color: red;
  transition: 4s
}

Answer 3

如果您将转换应用于:hover，转换只会发生在mouseover上，而不会发生在mouseout上。将转换应用于元素而非:hover将使转换同时发生在mouseover和mouseout上。

这里是fiddle to help illustrate。