我在做一個圖表，我畫了一條曲線。曲線可以每天變化，但X軸始終是24小時時間軸。我想沿著曲線制作一個當前時間指示器的動畫，如果可能的話，我想純粹用CSS來做。這意味著我希望動畫的速度在X方向上是線性的，而不是沿著路徑的某個百分比。

如果我用百分比，

@keyframes followpath {
    to {
        offset-distance: 100%;
    }
}

計時關閉是因為曲線較陡的時間段路徑變長，而曲線不太陡的時間段路徑變短。

如果我使用translateX，

@keyframes followpath {
    from {
        transform: translateX( 0% );
    }
    to {
        transform: translateX( 100% );
    }
}

時間是正確的，但沒有辦法遵循路徑。有什么辦法可以把速度設置為X方向的線性，同時仍然遵循路徑？

如果這是不可能的，我想我將不得不使用畢達哥拉斯來獲得相對于我想要移動的X距離的平移長度，但這將顯著增加所需的計算，所以堅持使用CSS會很好。