css3不能完全按照正弦曲線(xiàn)來(lái)做運(yùn)動(dòng)的軌跡，但可以模擬，比如曲線(xiàn)上的幾個(gè)點(diǎn)是(0,0),(1,1),(2,0),(3,1),(4,0),(5,1),動(dòng)畫(huà)邏輯如下：

@keyframes myanimate
{
0%   {left: 0;top: 0;}
20%  {left: 1;top: 1;}
40%  {left: 2;top: 0;}
60% {left: 3;top: 1;}
80% {left: 4;top: 0;}
100% {left: 5;top: 1;}
}

模擬點(diǎn)越密集，越接近正弦曲線(xiàn)，以上只是思路，還要考慮點(diǎn)間距和播放速度，希望對(duì)你有幫助

有 JS 就好辦了，算出來(lái)位置然后賦給元素就行了。正弦用 Math.sin，不過(guò)參數(shù)是弧度，所以像我們習(xí)慣的角度需要轉(zhuǎn)換一下：Math.PI * 角度 / 180。

純CSS3我知道的方法里面搞不出來(lái)因?yàn)镃SS3動(dòng)畫(huà)中沒(méi)有對(duì)路徑的操作，或者說(shuō)不好搞除非你把每一幀的變化都寫(xiě)上。如果會(huì)AE可以考慮先用AE制作動(dòng)畫(huà)，然后使用Lottie導(dǎo)出web可用的json文件，這樣可以做出很復(fù)雜的動(dòng)畫(huà)。不過(guò)這個(gè)方法我還沒(méi)用過(guò)可以去看Lottie的官方文檔

用Canvas實(shí)現(xiàn)

下面說(shuō)一個(gè)使用Canvas制作的方法，如果要用操作DOM來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，原理是一樣的只不過(guò)把繪制那一塊改為設(shè)置元素的定位。
先看一下Demo

定義小球類(lèi)

// 創(chuàng)建一個(gè)小球的構(gòu)造函數(shù)
function O() { }
// 給構(gòu)造函數(shù)添加繼承屬性
O.prototype = {
    init: function () {
        // X軸(正弦運(yùn)動(dòng)中心線(xiàn)的位置)
        this.h = canvas.height/2;
        // 在X軸所處的位置
        this.x = 0;
        // 在Y軸所處的位置
        this.y = this.h;
        // 小球半徑
        this.r = 20;
        // 小球運(yùn)動(dòng)的速度
        this.v = 10;
        // 小球顏色
        this.color = "rgb(255, 68, 68)";
    },
    draw: function () {
        // 繪制小球
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        this.updata();
    },
    // 更新小球位置
    updata: function () {
        // 如果橫向超出Canvas寬度就回到起點(diǎn)
        if(this.x > canvas.width) {
            this.x = 0;
        }
        // 橫軸移動(dòng)
        this.x += this.v;
        // 計(jì)算在縱軸的位置,中心位置加上偏移
        // 計(jì)算弧度,因?yàn)镸ath.sin()的參數(shù)是弧度,將整個(gè)寬度看為一個(gè)周期,X處所占的弧度就為,起點(diǎn)到X距離與寬度之比乘以2π
        let radian = this.x / canvas.width * Math.PI * 2;
        // 計(jì)算偏移高度,因?yàn)镸ath.sin()返回值是-1~1的數(shù)字,所以要將這個(gè)值轉(zhuǎn)化為真正移動(dòng)的高度,就是容器的一班高度減去球直徑
        let height = (canvas.height - this.r * 2) / 2
        this.y = this.h + Math.sin(radian) * height;
    }
}

繪制小球

// 創(chuàng)建小球并初始化
var o = new O();
o.init();
// 開(kāi)始動(dòng)畫(huà)
function animation() {
    // 刷新Canvas
    ctx.fillStyle = "rgba(255,255,255)";
    ctx.fillRect(0, 0, 1000, 500);
    // 繪制小球
    o.draw();
    // 調(diào)用下一幀
    aimnid = requestAnimationFrame(animation);
}

注釋里面都已經(jīng)寫(xiě)的很清楚了，我就不解釋了，完整代碼在這里查看完整代碼
如果對(duì)你有幫助請(qǐng)給一個(gè)Star～哦