为什么我的css按钮在悬停时显示“动画”？答案

【问题标题】：Why my css button show 'animate' when hover?为什么我的css按钮在悬停时显示“动画”？
【发布时间】：2013-05-26 04:07:27
【问题描述】：

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

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

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

希望你能帮帮我。

谢谢！

【问题讨论】：

【解决方案1】：

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

transition: all 0.5s ease 0s;

再加上您将精灵用作图像这一事实，显示的精灵部分的变化是带有过渡动画的。

要克服这个问题，要么指定更详细的过渡，哪些过渡应该是动画的，要么使用这样的东西取消你的徽标过渡：

#logo {
  transition: none;
}

【讨论】：

【解决方案2】：

你有一个 0.5s transition 用于 CSS 中设置的所有锚点。修复将是

#logo {
  transition: none;
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：