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

Question

我正在努力让这个动画更流畅地移动。我使用'transform: translateX() translateY()' 尝试了这个，我得到了我想要的结果，但我想使用 top/left 代替，因为我希望能够用 bottom/right 重复动画并且能够使用相同的测量值。

https://jsfiddle.net/jyozy12a/

@keyframes field10 {
    from{
        left: 201px;
    }
    to{
        left: 639px;
        top: 240px;
    }
}

Answer 1

设置元素css起始位置等于@keyframes规则起始位置；那是left:201px, top:0px

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

jsfiddle https://jsfiddle.net/jyozy12a/1/