单击时将按钮从左向右移动的 CSS 动画答案

【问题标题】：CSS animation to move a button from left to right when clicked单击时将按钮从左向右移动的 CSS 动画
【发布时间】：2021-12-28 20:37:08
【问题描述】：

我希望我的按钮在单击时从左向右移动。我想我有我需要的一切，但显然我要么遗漏了一些东西，要么我没有按正确的顺序放置一些东西。为什么我的箱子动不了？我需要使用 JavaScript 吗？ HTML 中只有一个类名为 box 的按钮。

.box {
  width: 100px;
  height: 150px;
  background: red;
  border: none;
  margin: 100px 100px;
  cursor: pointer;
  animation-name: move-right;
}

.box :hover{
  background-color: red;
}

.box :active {
  transition: all 2s linear;
}

@keyframes move-right {
  transform: translateX(350px,0);
}

【问题讨论】：

请分享您的 HTML
translateX 应该只有一个参数。此外，您的悬停和活动选择器不应与类名用空格分隔。
stackoverflow.com/questions/41587802/… 如果你不来这里，我想你的问题已经在这里回答了

标签： html css css-animations

【解决方案1】：

您需要使用 javascript 来监控点击事件。

提示

应从.box 类中删除动画名称。
悬停效果与默认状态颜色相同，如果您想显示正在发生的事情，它不能是相同颜色。
translateX() 采用一个值，除非您打算使用 translate(X, Y) 采用两个值。
在制作动画时不使用过渡时间，动画有自己的时间。

【讨论】：