CSS 翻译 - 意外行为

Question

我想要一个按钮在悬停时向下移动几个像素，但它又回来了。当您还在上面徘徊时，它不应该留在原处吗？

<a href="" class="btn">Email Me</a>

.btn {background: #2ecc71; padding: .5em 1em; border-radius: 3px; color:white; font-size: 1.5em; text-shadow:2px 2px 2px #178345; box-shadow: 0px 1px 1px #21a559; transition: transform 0.5s ease 0s;}
.btn:hover {background: #28b865; transform: translate(0px, 3px);}

http://codepen.io/anon/pen/zICBw

Answer 1

问题是 inline 元素无法正确转换。如果您将 transform 设置为正常状态，您将看到该转换无效。然而它确实对动画有一点影响，可能是因为在动画时，元素的显示变成了inline-block(或者在某些其他情况下是block，至少在动画时， transform 可以生效)。动画完成后，它返回到 inline。因此按钮的位置被设置回原位，因为平移变换没有效果。

您的按钮实际上是一个 a 元素，默认情况下它具有 inline 显示。您只需将其显示更改为 inline-block 或 block 即可正常工作:

.btn {
   /* ... */
   display:inline-block; 
}

Updated demo .