如何動畫元素以對角線方式移動而無需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/