CSS3動畫是網頁設計中不可缺少的一項技術，它可以幫助我們制作出更加酷炫的網頁。而CSS3動畫中的路徑動畫也是其中非常重要的一種動畫。下面我們就來學習一下CSS3動畫路徑應該如何制作。

/*定義一個路徑*/
@keyframes myPath {
0% { transform: translate(0,0); }
100% { transform: translate(400px,400px); }
}
/*使用路徑動畫*/
#myBox{
animation: myPath 5s linear infinite;
}

在上面的代碼中，我們首先定義了一個名為myPath的路徑動畫，這個動畫從0%到100%實現了從坐標(0,0)移動到坐標(400px,400px)的移動效果。然后我們可以將這個動畫添加到任何元素上，比如上面的#myBox元素。在#myBox元素上添加animation屬性，將myPath動畫作為參數，然后設置動畫時間、動畫的運動方式、以及動畫的次數。

在CSS3動畫中，我們還可以設置運動軌跡的自適應模式，這樣就可以使動畫更加人性化。下面來看一下具體的實現方式。

/*定義一個自適應路徑*/
@keyframes myPath {
0% { transform: translate(0,0); }
50% { transform: translate(200px,0); }
100% { transform: translate(400px,400px); }
}
/*使用自適應路徑動畫*/
#myBox{
animation: myPath 5s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

在上面的代碼中，我們定義了一個名為myPath的自適應路徑動畫。這個動畫首先從(0,0)開始移動，然后在50%的時候向右移動200px，最終到達目標點(400px,400px)。我們還可以看到，在#myBox元素上設置了一些額外的參數，比如cubic-bezier參數來設置動畫的運動方式，以及alternate參數，將動畫用反向運動的方式循環播放。

總結來說，CSS3動畫路徑是實現網頁動畫效果中非常重要的一種技術，它可以幫助我們制作出更加人性化的動畫效果。通過學習以上兩種實現方式，相信大家已經能夠熟練地制作出經過自定義軌跡運動的動畫效果了。