使用 CSS 动画触发第二个动画关键帧（或永久移动 div）？答案

【问题标题】：Trigger second animation keyframe (or move div permanently) with CSS animations?使用 CSS 动画触发第二个动画关键帧（或永久移动 div）？
【发布时间】：2021-02-06 02:14:33
【问题描述】：

我已尝试寻找解决此问题的方法，但还没有找到。

我想做的很简单：

当我单击一个按钮时，我想要一个框向右移动 200 像素，并带有 CSS 过渡。当我单击第二个按钮时，我希望该框从当前位置向下移动 200px。

我这里有这个基本代码：

HTML

<button class="one">First</button>
<button class="two">Second</button>
<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 2s;
}

.box.transOne {
  transform: translateX(200px);
}

.box.transTwo {
  transform: translateY(200px);
}

$(".one").click(function() {
  $(".box").toggleClass("transOne");
});

$(".two").click(function() {
  $(".box").toggleClass("transTwo");
})

但是，当我单击第二个按钮时，框确实向下移动了 200，但它在向下移动时沿对角线移回第一个 X 轴位置（即它不会在 X 轴上停留 200 像素）。

有没有办法可以用关键帧来做到这一点？就像通过第二个按钮单击触发第二个关键帧等。或者有更好的方法吗？我很困惑，找不到任何解决方案，所以非常感谢任何帮助。谢谢！

【问题讨论】：

标签： css animation css-animations

【解决方案1】：

简短回答

在.transTwo类中也设置翻译X

.box.transTwo {
  transform: translate(200px 200px);
}

解释

transform 覆盖其他属性，这是 css 的自然行为，就像其他属性 color、background-color、

基本规则是最新的属性集最强，最强在inline style，除非你实现!important

【讨论】：