Question

我试图让这个动画更顺畅地移动。我尝试使用＆＃39; transform：translateX（）translateY（）＆＃39;我得到了我想要的结果，但我想使用top / left代替，因为我希望能够使用bottom / right重复动画，并且能够使用相同的测量。

@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;
}