純js實現原理：
通過函數表達式來完成對應的移動，函數表達式能夠得到曲線圖都能完成。
比如 y=sin(x)就是典型的曲線函數。
轉換關系y：函數Y軸對應的就是我們的top Y==top
轉換關系x：函數X軸對應的就是我們的left X==left
示例：（由於是js，順帶畫了運動軌跡）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js元素弧線運動</title>
<style>
.box{
width: 1000px;
height: 500px;
background-color:#369;
position:relative;
}
.box>span{
display: block;
width: 10px;
height: 10px;
background-color:#963;
position:absolute;
top:230px
}
.box>.zz{
width: 3px;
height: 3px;
background-color:red;
position:absolute;
}
</style>
</head>
<body>
<div class="box">
<span></span>
</div>
<script>
(function(){
var boxDom = document.querySelector('.box');
var spanDom = document.querySelector('.box>span');
setInterval(function(){//定時器
var nDom = document.createElement('span');
nDom.classList.add('zz');//運動軌跡
var left = spanDom.offsetLeft;
var top = spanDom.offsetTop;
left += 1;
top = Math.sin(left/25)*100 + 230;//由於sinx是在正負1大小變化的我們這里放大了X和Y
spanDom.style.left = left+'px';
spanDom.style.top = top+'px';
nDom.style.left = left+'px';
nDom.style.top = top+'px';
boxDom.appendChild(nDom);//添加運動軌跡
},50)
})()
</script>
</body>
</html>
結果圖：
純css實現原理：
通過animation動畫屬性加上貝塞爾曲線來控制元素xy運動軌跡即可完成，具體運動軌跡通過貝塞爾曲線函數控制。
animation應該都用過，這里主要說一下貝塞爾曲線。
cubic-bezier稱為三次貝塞爾曲線，主要是生成速度曲線的函數。
其實大家也用過，平時的ease-in，ease-out，linear等都是通過貝塞爾曲線分裝好的函數。
示例：（示例通過控制父容器和子元素，賦予了子元素X和Y的運動速度，達到曲線移動效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js元素弧線運動</title>
<style>
.cont{
width: 400px;
height: 400px;
border: 2px solid #ff8800;
}
/* 父容器軌跡 */
.box{
width: 30px;
height: 30px;
background-color:#369;
/* animation: aa 2s ease-in forwards;*/
animation: aa 2s cubic-bezier(0.42,0,1,1) forwards;
}
/* 子元素軌跡 */
.box>span{
display: block;
width: 30px;
height: 30px;
background-color:#963;
/* animation: bb 2s ease-out forwards;*/
animation: bb 2s cubic-bezier(0,0,0.58,1) forwards;
}
@keyframes aa {
to{transform: translateX(370px)}
}
@keyframes bb {
to{transform: translateY(370px)}
}
</style>
</head>
<body>
<div class="cont">
<div class="box">
<span></span>
</div>
</div>
<script>
</script>
</body>
</html>
效果圖：圖示藍色塊為父容器，只有一個運動狀態，棕色塊有兩個方向運動狀態。
js+css混合實現方法就多種多樣了，暫不討論了。