css3不能完全按照正弦曲線來做運動的軌跡，但可以模擬，比如曲線上的幾個點是(0,0),(1,1),(2,0),(3,1),(4,0),(5,1),動畫邏輯如下：

@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;}
}

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

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

純CSS3我知道的方法里面搞不出來因為CSS3動畫中沒有對路徑的操作，或者說不好搞除非你把每一幀的變化都寫上。如果會AE可以考慮先用AE制作動畫，然后使用Lottie導出web可用的json文件，這樣可以做出很復雜的動畫。不過這個方法我還沒用過可以去看Lottie的官方文檔

用Canvas實現(xiàn)

下面說一個使用Canvas制作的方法，如果要用操作DOM來實現(xiàn)動畫，原理是一樣的只不過把繪制那一塊改為設置元素的定位。
先看一下Demo

定義小球類

// 創(chuàng)建一個小球的構造函數(shù)
function O() { }
// 給構造函數(shù)添加繼承屬性
O.prototype = {
    init: function () {
        // X軸(正弦運動中心線的位置)
        this.h = canvas.height/2;
        // 在X軸所處的位置
        this.x = 0;
        // 在Y軸所處的位置
        this.y = this.h;
        // 小球半徑
        this.r = 20;
        // 小球運動的速度
        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寬度就回到起點
        if(this.x > canvas.width) {
            this.x = 0;
        }
        // 橫軸移動
        this.x += this.v;
        // 計算在縱軸的位置,中心位置加上偏移
        // 計算弧度,因為Math.sin()的參數(shù)是弧度,將整個寬度看為一個周期,X處所占的弧度就為,起點到X距離與寬度之比乘以2π
        let radian = this.x / canvas.width * Math.PI * 2;
        // 計算偏移高度,因為Math.sin()返回值是-1~1的數(shù)字,所以要將這個值轉(zhuǎn)化為真正移動的高度,就是容器的一班高度減去球直徑
        let height = (canvas.height - this.r * 2) / 2
        this.y = this.h + Math.sin(radian) * height;
    }
}

繪制小球

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

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