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

如果我用百分比，

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

計(jì)時(shí)關(guān)閉是因?yàn)榍€較陡的時(shí)間段路徑變長(zhǎng)，而曲線不太陡的時(shí)間段路徑變短。

如果我使用translateX，

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

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

如果這是不可能的，我想我將不得不使用畢達(dá)哥拉斯來(lái)獲得相對(duì)于我想要移動(dòng)的X距離的平移長(zhǎng)度，但這將顯著增加所需的計(jì)算，所以堅(jiān)持使用CSS會(huì)很好。