Question

我正在学习CSS3。现在，我在w3schools网站上看到的是：

CSS

#ID {
  transition: transform 3s;
}

#ID:hover {
  transform: rotateX(20deg);
}

我所做的就是这个：

CSS：

#ID:hover {
  transform: rotateX(20deg);
  transition: transform 3s;
}

两者都有效。所以，问题是：我可以将转换和任何转换属性放在同一个选择器中吗？或者这不是正确的方法？

Answer 1

简短回答：

如果您在transition中定义了element:hover属性，那么仅才会在该状态下应用。

<强>说明

当元素处于悬停状态时，您在element:hover中定义的任何CSS属性仅，而您在element中定义的任何CSS属性都将被应用在两个状态。

在正常状态下声明的过渡属性：

了解元素状态发生变化时如何始终运行转换。当您停止悬停元素时，它仍会使转换回到正常状态。

CODE SNIPPET

#ID {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: royalblue;
  transition: transform 1s;
}
#ID:hover {
  transform: rotateX(60deg);
}

<div id="ID"></div>

在悬停状态下声明的过渡属性：

了解当您停止悬停元素时转换如何中断，并立即跳转到正常状态。

CODE SNIPPET

#ID {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: royalblue;
}
#ID:hover {
  transition: transform 1s;
  transform: rotateX(60deg);
}

<div id="ID"></div>

Answer 2

第一个例子通常是正确的，因为过渡时间是在未受影响的状态下说明的。但这基于我已经看到的关于如何在悬停动作上生成转换的大多数示例。

Answer 3

第一种情况：

#ID中的所有转换都将转换为3秒。当您将#ID悬停时，您的转化为rotateX(20deg)。

第二种情况：

当您将#ID悬停时，您的过渡时间为3秒。

总体而言：

第一个css的所有转换都将持续3秒。然后，您可以在#ID的不同位置应用转场。而在你的第二种情况下，你将它们分开，如果你想要通过除了悬停之外的其他东西触发另一个转换，你将不得不再次指定持续时间。

两者都是正确的

Answer 4

如果为:hover状态指定了转换，则转换将不适用于鼠标移出。

在悬停中而不是在正常状态下应用CSS过渡属性有什么区别？

4 个答案: