svg路径动画

<template>
    <div>
        <!-- 动态时间轴 -->
        <div class="shaft">
            <div class="bg">
                <img src="@/assets/service/shaft.png"/>
                <div class="main"> </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "shaft",
  data() {
    return {
    }
  },
};
</script>
<style lang="less" scoped>
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

.shaft{
    padding:100px 35px 20px;
    width: 1200px;
    height: 500px;
    box-shadow: 0px 0px 20px 0px rgba(2,38,135,0.09);
    .bg{
        width: 100%;
        height: 100%;position: relative;
        background:  url("@/assets/service/timebg.png") no-repeat;
        img{
            margin-top: 6%;
        }
        &::before {
            position: absolute;
            content: "";
            width: 20px;
            height: 20px;
            background: red;
            border-radius: 50%;
            offset-path: path(
            "m31,308c0,0 0.29289,0.29289 1,1c0.70711,0.70711 2.69344,1.4588 4,2c0.92388,0.38269 2.69344,1.4588 4,2c0.92388,0.38269 3.29289,0.29289 4,1c0.70711,0.70711 1.07612,0.61731 2,1c1.30656,0.5412 2.07612,0.61731 3,1c1.30656,0.5412 2,2 3,2c1,0 1,1 2,1c1,0 1.29289,0.29289 2,1c0.70711,0.70711 2,0 3,0c1,0 1.29289,0.29289 2,1c0.70711,0.70711 1,1 2,1c1,0 2,0 3,0c1,0 1.29289,0.29289 2,1c0.70711,0.70711 2,0 3,0c1,0 2.29289,-0.70711 3,0c0.70711,0.70711 1,1 2,1c1,0 2,0 3,0c1,0 1.69344,0.4588 3,1c0.92388,0.38269 1.29289,0.29289 2,1c0.70711,0.70711 2,0 3,0c1,0 1,1 2,1c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c2,0 3,0 4,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 4,0c1,0 1,-1 2,-1c1,0 2.29289,0.70711 3,0c0.70711,-0.70711 1.58578,0.41422 3,-1c0.70711,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 1.29289,-0.29289 2,-1c0.70711,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 2.29289,-0.29289 3,-1c0.70711,-0.70711 1.29289,-1.29289 2,-2c0.70711,-0.70711 1.29289,-0.29289 2,-1c0.70711,-0.70711 0.61731,-1.07613 1,-2c0.5412,-1.30656 2,-1 3,-2c1,-1 1.29289,-1.29289 2,-2c0.70711,-0.70711 1.29289,-0.29289 2,-1c0.70711,-0.70711 1.29289,-0.29289 2,-1c0.70711,-0.70711 1.29289,-0.29289 2,-1c0.70711,-0.70711 0,-2 1,-2c1,0 2,-1 3,-1c1,0 2,-1 3,-1c1,0 1,-1 2,-1c1,0 1.69344,-0.4588 3,-1c0.92387,-0.38268 2,0 3,0c1,0 1.29289,-0.29289 2,-1c0.70711,-0.70711 2,0 3,0c1,0 1,-1 2,-1c1,0 2.29289,0.70711 3,0c0.70711,-0.70711 1.02675,-0.77025 2,-1c2.17625,-0.51374 2.29289,-1.29289 3,-2c0.70711,-0.70711 2.07613,0.38268 3,0c1.30656,-0.5412 2.29289,-0.29289 3,-1c0.70711,-0.70711 1.4588,-0.69344 2,-2c0.38269,-0.92388 0.69344,-1.4588 2,-2c0.92387,-0.38268 1.29289,-0.29289 2,-1c0.70711,-0.70711 0.29289,-1.29289 1,-2c0.70711,-0.70711 0,-2 1,-2c1,0 1.29289,-0.29289 2,-1c0.70711,-0.70711 1,-1 2,-1c1,0 2,-1 3,-1c1,0 2.29289,0.70711 3,0c0.70711,-0.70711 1,-1 2,-1c1,0 2,0 3,0c1,0 2.29289,0.70711 3,0c0.70711,-0.70711 1,-1 2,-1c2,0 2,-1 3,-1c1,0 2,0 3,0c1,0 1.29289,-0.29289 2,-1c0.70711,-0.70711 2,0 3,0c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 2,0 3,0c1,0 2.29291,-0.29289 3,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 2,0 3,0c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 2,-1c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 3,-1c1,0 2,0 3,0c1,0 1,-1 2,-1c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 1.69345,0.4588 3,1c0.92389,0.38268 1.69345,0.4588 3,1c0.92389,0.38268 1.69345,0.4588 3,1c0.92389,0.38268 1,1 2,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 1.69345,0.4588 3,1c0.92389,0.38268 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 1,1 2,1c1,0 2,1 3,1c1,0 2.4588,-0.30656 3,1c0.38269,0.92388 1,1 2,1c1,0 1,1 2,1c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 1,1 2,1c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 2,0 3,0c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,1 3,1c1,0 2,0 3,0c1,0 2,0 3,0c1,0 3,0 4,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 0.69345,-1.4588 2,-2c0.92389,-0.38268 1.07611,-0.61732 2,-1c1.30655,-0.5412 1.29291,-1.29289 2,-2c0.70709,-0.70711 1.29291,-1.29289 2,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0,-2 1,-2c1,0 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.69345,-1.4588 2,-2c0.92389,-0.38268 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0,-2 1,-2c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.69345,-1.4588 2,-2c0.92389,-0.38268 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 2.29291,-0.29289 3,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.69345,-0.45881 3,-1c0.92389,-0.38268 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 2.186,0.30745 4,-1c1.14728,-0.8269 2,-1 3,-1c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 2,-1c1,0 2,0 3,0c1,0 1,-1 2,-1c1,0 2,0 3,0c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 2.29291,0.70711 3,0c0.70709,-0.70711 1,-1 2,-1c1,0 1,-1 2,-1c1,0 2,0 3,0c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 3,0 4,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 0.29291,1.29289 1,2c0.70709,0.70711 1,1 2,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 2.29291,-0.70711 3,0c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 1,1 2,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 1,1 2,1c1,0 1,1 2,1c1,0 2,0 3,0c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 1,1 2,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2.29291,-0.70711 3,0c0.70709,0.70711 0.29291,1.29289 1,2c0.70709,0.70711 2.29291,-0.70711 3,0c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 1,1 2,1c1,0 1.07611,0.61732 2,1c1.30658,0.54119 2.29291,0.29289 3,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 1.29291,0.29289 2,1c0.70709,0.70711 0.69342,1.45881 2,2c0.92389,0.38268 1.29291,0.29289 2,1c0.70709,0.70711 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 1,1 2,1c1,0 2.29291,0.29289 3,1c0.70709,0.70711 1,1 2,1c1,0 1,1 2,1c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1,1 2,1c1,0 2.29291,-0.70711 3,0c0.70709,0.70711 1.07611,0.61732 2,1c1.30658,0.5412 2,1 3,1c1,0 2,1 3,1c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 2,0 3,0c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 2,0 3,0c1,0 1.29291,0.29289 2,1c0.70709,0.70711 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,0 3,0c1,0 2,-1 3,-1c1,0 2,0 3,0c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 2.07611,0.38268 3,0c1.30658,-0.5412 2,-1 3,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1,-1 2,-1c1,0 2.07611,-0.61732 3,-1c1.30658,-0.5412 1.69342,-1.4588 3,-2c0.92389,-0.38268 1.69342,-0.45881 3,-1c0.92389,-0.38268 1.29291,-0.29289 2,-1c0.70709,-0.70711 2,0 3,0c1,0 1,-1 2,-1c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1.07611,-0.61732 2,-1c1.30658,-0.54119 2,-1 3,-1c1,0 2,-1 3,-1c1,0 1,-1 2,-1c1,0 2.29291,0.70711 3,0c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 0.69342,-1.45881 2,-2c0.92389,-0.38268 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 2.29291,0.70711 3,0c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0,-2 1,-2c1,0 1.29291,-0.29289 2,-1c0.70709,-0.70711 1.29291,-0.29289 2,-1c0.70709,-0.70711 0.29291,-1.29289 1,-2c0.70709,-0.70711 1,-1 2,-1l0,-1"
            );
            //这里放svg路径 生成效果官网：https://c.runoob.com/more/svgeditor/
            offset-rotate: 0deg;
            animation: move 3s infinite alternate ease-in-out;
        }
    }
}

</style>

animation
1 动画效果名称
2 动画耗时
3 动画速度曲线
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始，然后加快，在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。
4 动画延迟
5 动画播放次数 n 次 infinite 无限
6 是否轮流反向播放 normal 正常 alternate 轮流反向

animation-fill-mode:forwards; //动画停止不还原
相关参数：
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 应用动画结束样式到目标元素上
backwards 应用动画开始样式到目标元素上
both 向前和向后填充模式都被应用