CSS反向按钮在发布时激活动画

我正在尝试制作一个3D风格的按钮，激活时向下移动4像素，不激活时向后移动。下推动画工作得很完美，但让我不舒服的是瞬间向后跳。释放按钮后如何反转动画？如果可能的话，我想要纯CSS的

CSS:

---

很少有理由使用CSS动画。坚持过渡

.btn {
    transition: height 0.15s ease-in-out;
}

.btn {
    top: 4px;
}

---

你不应该为此使用动画。过渡的存在正是因为这个原因。我不明白为什么在这里使用动画，看起来你真的不知道什么时候使用哪个。这个编辑继续使用动画，但正如我说的，你应该使用过渡，它应该可以工作。啊，我不知道高度控制顶部属性。我试着解决这个问题。谢谢你的回答！它不是直接的，但是当顶部改变时，高度也可能改变。我想你可能也能转换上衣，不确定。

.btn {
    transition: height 0.15s ease-in-out;
}

.btn {
    top: 4px;
}