translateXとtranslateYを使わずに斜めに移動する要素をアニメーション化するにはどうすればよいですか？

Question

私はこのアニメーションをよりスムーズに動かそうとしています。私は 'transform：translateX（）translateY（）'を使用してこれを試してみましたが、私が望む結果が得られましたが、bottom/rightでアニメーションを繰り返したい同じ測定値を使用してください。

https://jsfiddle.net/jyozy12a/

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

Answer 1

開始位置@keyframesルールに等しい要素css開始位置を設定します。すなわち、素子 `左設定、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/