为何我的css按钮在悬停时会显示“动画”？

Question

我刚刚发现使用CSS for button比旧的Javascript鼠标悬停更好。所以我想我会试一试。

当我将新代码放在徽标上时。当你在徽标上移动鼠标时我注意到了。徽标显示“旋转”动画而不是“交换”图像。我想知道它为什么这样做？

您可以尝试查看链接：http://www.streetlightministries.ca/2013 - 将鼠标移到徽标上 - 您可以看到我在说什么。

我希望你能帮助我。

谢谢！

Answer 1

对于css中设置的所有锚点，您有0.5s transition。修复将是

#logo {
  transition: none;
}

Answer 2

您的问题可能出在这个CSS定义中，您可以将其应用于所有<a>元素。

transition: all 0.5s ease 0s;

与您使用精灵作为图像的事实一起，精灵部分的变化（如图所示）通过过渡进行动画处理。

要克服此问题，请指定更详细的内容，应设置哪些过渡动画或使用以下内容取消徽标转换：

#logo {
  transition: none;
}

Answer 3

这是因为“过渡”。在CSS中，从锚点中删除过渡元素。或者，或者，将“transition：none”添加到#logo。

Answer 4

为什么要使用transition: none？只需删除它！