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

Question

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

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

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

我希望你能帮助我。

谢谢！

score 2 · Accepted Answer

transition您在 css 中设置的所有锚点都有 0.5 秒。一个修复将是

#logo {
  transition: none;
}

score 2 · Accepted Answer

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

transition: all 0.5s ease 0s;

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

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

#logo {
  transition: none;
}

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

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

于 2013-05-30T14:37:09.493 回答

4 回答 4