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

Answer 2

为什么不简单地转换top？你需要定位元素，但它会在没有返回的情况下完成相同的工作。

转换转换的问题是您更改元素占用的平面，这会导致悬停状态不再触发。解决此问题的一种方法是将基本变换状态应用于元素。

Demo Fiddle

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

CSS Translate - 意外的行为

2 个答案:

Updated demo

Demo Fiddle