点击时按钮从左向右移动的CSS动画不生效，该如何解决？

按钮无法移动的原因 #

• 选择器语法错误：.box :hover、.box :active中间存在多余空格，属于后代选择器，匹配的是.box内部的子元素，而非按钮本身，导致点击/hover状态的规则完全不生效。
• @keyframes语法错误：关键帧动画必须声明关键帧节点（如from/to或者百分比值），你直接在move-right里写属性规则不符合语法规范，动画本身无法被浏览器识别。
• transform属性参数错误：translateX() 仅接收1个位移参数，你写的两个参数是translate()的用法，属性值不合法。
• 过渡逻辑缺失：你在.box:active里只声明了transition过渡规则，但没有声明该状态下需要变更的属性（也就是X轴位移的目标值），浏览器不知道要过渡什么属性，自然不会产生动画。
• animation属性配置不全：即便你想用关键帧动画实现，仅写animation-name是不够的，必须配置animation-duration等必填属性，且默认动画是页面加载时触发，不符合你点击触发的需求。

实现方案 #

1. 纯CSS实现（点击按住时移动，松开复位，无需JS） #

如果你只需要按住按钮时移动、松开后回到原位，只用CSS就能实现，修正后的代码如下：

.box {
  width: 100px;
  height: 150px;
  background: red;
  border: none;
  margin: 100px 100px;
  cursor: pointer;
  /* 把transition写在元素本身，让进入和退出状态都有过渡 */
  transition: all 2s linear;
}

.box:hover {
  /* 该规则和默认背景色一致，无实际作用可以直接删除 */
  background-color: red;
}

.box:active {
  /* 激活状态下定义位移目标值 */
  transform: translateX(350px);
}

2. 需要JS的场景（点击后保持移动状态，不自动复位） #

如果你需要点击一次按钮后，按钮就停在右侧位置、不会因为松开鼠标复位，就需要用JS配合CSS实现，示例代码如下：

<button class="box"></button>
<script>
const btn = document.querySelector('.box')
btn.addEventListener('click', () => {
  btn.classList.add('move')
})
</script>

补充对应CSS规则：

.box.move {
  transform: translateX(350px);
}

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