div内按钮translateY失效原因？如何实现居中+按下动画

为什么transform会导致动画异常？ #

CSS的transform属性是完全覆盖式的——当你在:active状态下设置transform: translateY(5px)时，它会直接替换掉初始状态里的transform: translate(-50%, 0)，而不是叠加两种变换效果。这就导致按钮按下时，原来的水平居中偏移被取消，按钮失去居中定位，自然会向侧边偏移，同时垂直移动的效果也因为居中失效显得异常。

解决方法（两种简单方案） #

方案1：在:active状态同时保留居中与垂直移动 #

直接在:active的transform里合并水平居中偏移和垂直移动距离，让两个变换效果同时生效：

#button-2 {
  position: absolute;
  width: 100px;
  padding: 5px 5px;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  border-color: darkslategray;
  background-color: antiquewhite;
  box-shadow: 0px 9px gray;
  cursor: pointer;
  top: 62%;
  left: 50%;
  transform: translate(-50%, 0);
}

#button-2:active {
  background-color: cornsilk;
  box-shadow: 0px 3px gray;
  /* 同时保留水平居中的translateX和垂直移动的translateY */
  transform: translate(-50%, 5px);
}

方案2：换一种无需transform的居中方式 #

改用margin: auto实现水平居中，初始状态不需要依赖transform，:active时只需要设置垂直移动即可：

#button-2 {
  position: absolute;
  width: 100px;
  padding: 5px 5px;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  border-color: darkslategray;
  background-color: antiquewhite;
  box-shadow: 0px 9px gray;
  cursor: pointer;
  top: 62%;
  /* 用left/right+margin:auto实现水平居中，无需transform */
  left: 0;
  right: 0;
  margin: 0 auto;
}

#button-2:active {
  background-color: cornsilk;
  box-shadow: 0px 3px gray;
  transform: translateY(5px);
}

另外注意你的.container样式存在语法错误，需要补上分号：

.container {
  position: relative;
  width: 600px;
  height: 600px;
}

内容的提问来源于stack exchange，提问作者noG23