Javascript 如何设置元素的动画，使其在没有translateX和translateY的情况下沿对角线移动？

我正在努力使这个动画移动得更平稳。我使用“transform:translateX（）translateY（）”尝试了这个方法，得到了我想要的结果，但我想使用top/left，因为我希望能够使用bottom/right重复动画，并且能够使用相同的测量值

---

将元素

css

起始位置设置为

@关键帧

规则起始位置；即

左：201px

，

顶：0px

.card-o {
  border: 1px solid black;
  border-radius: 2px;
  position: absolute;
  width: 160px; 
  height: 200px;
  left:201px;
  top:0px;
}

---

jsiddle

将元素

css

起始位置设置为

@关键帧

规则起始位置；即

左：201px

，

顶：0px

.card-o {
  border: 1px solid black;
  border-radius: 2px;
  position: absolute;
  width: 160px; 
  height: 200px;
  left:201px;
  top:0px;
}

---

jsidle

@NickDuto或者，设置元素

左：0px

；您还可以在

@关键帧内的
脱谐中设置
左：0px
，或者设置元素
左：0px
；您还可以从
@关键帧内的
脱格
在
处设置
左：0px